[SOLVED] Centralising a sub-wrap

Madball · #1 (**permalink**) Nov 6th, 2007, 12:47

Hi all,

Since Linda was kind enough to show me how to create a wrap using CSS so I don't need to use position. I have tried to create a sub wrap within the main wrap that will hold the Header, Content and Footer. The subwraps width wants to be 800px and centralised inside the main wrap. I've looked on the site and I've seen you all saying use:

HTML: Select all

margin: auto 0;

but when I use this nothing seems to happen. It maybe I've missed something so here is both the HTML code and CSS code

HTML: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css"href="test4.css" />
<title>Time and Date</title>
</head>
<body>
<div id="wrap">
    <div id="topbar">
       <div class="time">Name & Points</div>
       <div class="login">Date & Time</div>
    </div><!--end blackline div -->
    <div id="subwrap">Hello ALL</div>
    <div id="header">Header 
Image 
Here<br />
 Blah<br />
Blah<br />
Blah
  </div>
  <div id="content">Content of site goes in this div!<br />
    Blah<br />
    Blah<br />
    Blah<br />
</div>
    <div id="footer">Footer here!</div>
</div><!--end wrap div -->
</body>
</html>
</html>

HTML: Select all

/* ----- Body Configuration ----- */
body
 {
 margin: 0;
 background-color:#666666;
 }
/* ----- Wrap Configuration ----- */
#wrap
 {
 width: 100%;
 height: 100%;
 margin: 0 auto;
 }
#subwrap
 {
 width: 800px;
 margin: 0 auto;
 }
/* ----- Top Bar Configuration ----- */
#topbar
 {
 width: 100%;
 margin: 0 auto;
 padding: 2px 5px 2px 5px;
 margin-bottom: 15px;
 background: #000000;
 border-bottom: 1px solid #FFFFFF;
 font: 9px Arial, Helvetica, sans-serif;
 color: #FFFFFF;
 overflow: hidden;  
    }       
.time
 {
 width: 300px;
 float: left;
 text-align: left;
 }
.login
 {
 width: 300px;
 float: right;
 text-align: right;
 }
 
/* ----- Content Configuration ----- */
#header
 {
 width: 100%;
 margin: 0 auto;
 background: #990000;
 }    
#content {
    width: 100%;
    margin: 0 auto;
    background:#FFFFCC;
    }    
#footer {
    width: 100%;
    margin: 0 auto;
    background: #000000;
    }

Stuart · #2 (**permalink**) Nov 6th, 2007, 12:51

I take that you are trying to center all of your elements with margin:0 auto; I think the problem is that you have margin:0; set to the body in the css. Try removing it.

karinne · #3 (**permalink**) Nov 6th, 2007, 12:52

Quote:

Originally Posted by swagner

I take that you are trying to center all of your elements with margin:0 auto; I think the problem is that you have margin:0; set to the body in the css. Try removing it.

margin: 0 in the body { } is fine. It's removing the default margins set by the browser.

Could you post a link please?

MikeHopley · #4 (**permalink**) Nov 6th, 2007, 12:55

*sigh*

You have no Doctype. You are probably looking at this in IE6. Those two factors combined will destroy auto margins.

Add a Doctype, and validate your site.

Please upload your site (or page), and give us a link!

Madball · #5 (**permalink**) Nov 6th, 2007, 12:58

http://www.cipherpol.com/test4.htm This is the site, where it says "HELLO ALL" is the subwrap. Once I get that to be centered I was going to put the head, content and footer into it.

karinne · #6 (**permalink**) Nov 6th, 2007, 13:00

Like Mike said ... add a DOCTYPE first.

Madball · #7 (**permalink**) Nov 6th, 2007, 13:04

:S not to sound completely stupid hehe, since I'm at work I'm using Frontpage 2003 which is completely a waste of space. I have Dreamweaver CS3 at home which automatically puts the DOCTYPE in, were as frontpage it doesn't and I don't know how to hehe.

Also I'm using IE7.

MikeHopley · #8 (**permalink**) Nov 6th, 2007, 13:18

HTML is text. That's all. You can use notepad to add a doctype!

Testing your page confirms my prediction: the centring is working in Firefox, but not in IE6. All you have to do is add a doctype.

If you're not already testing in Firefox, you should be!

When you test in Firefox, errors are (almost) always your own fault; when you test in IE, it's impossible to know whether you or the browser is to blame.

I advise against allowing any program to choose the doctype. Different doctypes have different uses, and Dreamweaver chooses a silly one by default (XHTML trans.). See my article on doctypes for more information.

Madball · #9 (**permalink**) Nov 6th, 2007, 13:26

OK I've got it working, but not 100%, the text has been aligned to the center of the:

HTML: Select all

<div id="subwrap">

but the actual div isn't centered on the screen, it is still aligned to the left. Am I doing something wrong there?

The DOCTYPE I added was:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>

EDIT!!!! OK it is working, my fault sorry. When I look at it in IE7 it is fine, but when I look at it in Frontpage 2003 editing area it is still aligned to the left.

MikeHopley · #10 (**permalink**) Nov 6th, 2007, 13:33

Well done!

Your <div> is centred correctly. I don't see the problem. Try reducing the width of the <div>, and adding a background colour, so that you can observe it's behaviour more easily.

karinne · #11 (**permalink**) Nov 6th, 2007, 14:43

Quote:

Originally Posted by Madball

EDIT!!!! OK it is working, my fault sorry. When I look at it in IE7 it is fine, but when I look at it in Frontpage 2003 editing area it is still aligned to the left.

ALWAYS view/test your site in the proper browsers (IE6, IE7, FF, Opera and Safari) NEVER in your editors' preview area

Glad to see you got it working

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to text wrap?	Quetzal	Web Page Design	9	Jun 3rd, 2008 18:58
Centralising my site	danny322	Web Page Design	16	Nov 5th, 2007 16:12
div wrap not working on IE pc	jillcary	Web Page Design	5	Jul 19th, 2007 17:33
Div outside wrap issue	timmytots	Web Page Design	5	Oct 14th, 2006 23:28
How to wrap text around a div	AdRock	Web Page Design	6	Sep 5th, 2006 19:02

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Centralising a sub-wrap