Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: not2easy

Message Too Old, No Replies

trouble with margins

     
7:34 pm on Mar 21, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Mar 27, 2004
posts:276
votes: 0


Im having trouble getting the page to look right using center or margins. I have the body set to 100% and the main container set to 96%, if i set the body to text-align: center; it does not center the main container in both IE and firefox. If i set the left and right margins to 2% each it looks great in firefox yet IE 6 seems to add both together and put a 4% margin in the left with none in the right. here is some coding, to see if you can figure out if my calculations are incorrect.
####################################
CSS
/*Header main box and main body setup*/
body
{
margin-top: 20px;
margin-bottom: 20px;
background-color: #eee9e9;
}
#main
{
float: left;
width: 96%;
background-color: white;
margin-left: 15px;
margin-bottom: 20px;
}
#left
{
float: left;
width: 19.25%;
height: 320px;
text-align: center;
background-image:
url(../tge-sb.jpg);
background-repeat:
no-repeat;
margin: 0%;
}

/*Main content pain (right)*/
#content
{
width: 74%;
font-family: "sans serif", Arial;
font-size: 16px;
font-style: italic;
text-align: left;
margin-left: 22%;
}
############################
HTML
<body >

<div id="main">
<div id="top">
</div>
<div id="left">
</div>
<div id="content">
</div>
<br style="clear:both" />
<div id="bottom">
</div>
</div>
</body>
Thanks in advance
Pat

8:30 pm on Mar 21, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 4, 2002
posts:385
votes: 0


What I see is about what I'd expect given your code. What exactly don't you like? (It's not clear to me what should change.)

A couple of notes:

You don't need to put any think after 0 in places like this:
margin: 0;

Where I put one, I usually put both margin and padding, like this:
margin: 0;
padding: 0;

In general, I wouldn't use this:
<br style="clear:both" />
I'd put the clear: both on the bottom css. If that doesn't work, I'd probably add a <hr> that has clear: both, like this:


hr.clearfloat { /* used to be sure floats finish before next lower div starts */
visibility: hidden;
clear: both;
height: 0;
border: 0;
margin: 0;
padding: 0;
}
9:14 pm on Mar 21, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


yet IE 6 seems to add both together and put a 4% margin in the left with none in the right

That's very close to what is happening. Actually, IE is applying both margins, but it is doubling the left margin because the element to which the margin applies is floated left.

This is a well-documented IE bug. Check out PIE's lucid description of it here: Doubled Float-Margin Bug [positioniseverything.net].

Add display:inline; to the margined-and-floated element (#main in your layout) to fix it.

cEM

9:22 pm on Mar 21, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Mar 27, 2004
posts:276
votes: 0


thank you cEM, I was hoping it was just a bug that could be fixed easy
Pat