468,316 Members | 2,116 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

Two Column layout has extra space in IE

Hi,

I'm new to this group, but in need of some help with a css based two
column layout.

The layout consists of a short left nav and a content section. The
problem is that in IE, the content is shifted approx. 2 pixels to the
right where the left nav floats next to it. This shouldn't be and
isn't in FF.

Here's the css:

body{
margin-top:2px;
}

#container {
width: 100%;
margin: 0px auto;
min-width:830px;
}

#pagebody{
clear:both;
margin:0;
padding:0;
background:url(../images/bg_gray.gif) repeat-y;
}

#leftnav {
float: left;
width: 152px;
margin: 0;
padding: 0;
margin-top:3px;
}

#content {
margin:0px;
margin: 3px 0px 0px 155px;
padding: 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
}
and the html (simplified for posting):

<div id="container">
<div id="header">Defined in a different style sheet</div>
<div id="pagebody">
<div id="leftnav">This is a left nav</div>
<div id="content">Here is my content.</div>
</div>
<div id="footer">This is a footer.</div>
</div>

Any help would be appreciated. Thanks.

Apr 13 '07 #1
3 3360
On Apr 13, 11:34 am, Rich.Heph...@gmail.com wrote:
Hi,

I'm new to this group, but in need of some help with a css based two
column layout.

The layout consists of a short left nav and a content section. The
problem is that in IE, the content is shifted approx. 2 pixels to the
right where the left nav floats next to it. This shouldn't be and
isn't in FF.

Here's the css:

body{
margin-top:2px;

}

#container {
width: 100%;
margin: 0px auto;
min-width:830px;

}

#pagebody{
clear:both;
margin:0;
padding:0;
background:url(../images/bg_gray.gif) repeat-y;

}

#leftnav {
float: left;
width: 152px;
margin: 0;
padding: 0;
margin-top:3px;

}

#content {
margin:0px;
margin: 3px 0px 0px 155px;
padding: 0;

}

#footer {
clear: both;
margin: 0;
padding: .5em;

}

and the html (simplified for posting):

<div id="container">
<div id="header">Defined in a different style sheet</div>
<div id="pagebody">
<div id="leftnav">This is a left nav</div>
<div id="content">Here is my content.</div>
</div>
<div id="footer">This is a footer.</div>
</div>

Any help would be appreciated. Thanks.
Here's an even better example:

http://www.cvillehephners.com/gmaps/twocoltest.html

Apr 13 '07 #2
Ri**********@gmail.com wrote in
news:11**********************@y80g2000hsf.googlegr oups.com:
><div id="container">
<div id="header">Defined in a different style sheet</div>
<div id="pagebody">
<div id="leftnav">This is a left nav</div>
<div id="content">Here is my content.</div>
</div>
<div id="footer">This is a footer.</div>
</div>

Any help would be appreciated. Thanks.

Here's an even better example:

http://www.cvillehephners.com/gmaps/twocoltest.html
Try adding these rules to your CSS:

#pagebody { position: relative; }

#leftnav { position: absolute; left: 0; top: 0; }
#content { position: relative; right: 0; top: 0; }

This will work if you can guarantee that #content will always be
taller than #leftnav -- basically the taller of the two positioned
elements is relative, to make the containing div the same height.

Rob Kerr
--
"It's impossible for an Englishman to open his mouth without making
some other Englishman despise him."
-- G.B.S., "Pygmalion"
Apr 13 '07 #3
In article
<11*********************@w1g2000hsg.googlegroups.c om>,
Ri**********@gmail.com wrote:
Hi,

I'm new to this group, but in need of some help with a css based two
column layout.

The layout consists of a short left nav and a content section. The
problem is that in IE, the content is shifted approx. 2 pixels to the
right where the left nav floats next to it. This shouldn't be and
isn't in FF.

Here's the css:

body{
margin-top:2px;
}
IE is known to add 3px under some circumstances to the content
next to a float. If you do not design so tightly where 3px counts
a lot, you won't have a problem. This is advsable. But if you
must account for such pixels then you can "talk" to IE Win alone
and give 3 less pixels to the content left margin just for IE
Win. You will need to read up on this and have a go.

<http://www.positioniseverything.net/explorer/threepxtest.html>

I think this may be what you are running up against. If not, then
it should still be of interest to you.

There is another thing you do not mention, perhaps it s not
showing up except in Safari? Your content is not aligned with the
floated text. It seems you can fix this by giving #pagebody a
border, 1px in the same colour as the background (so as not to
show). I am not quite sure why this is. If you want any demo of
it, please ask.

--
dorayme
Apr 13 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by yaara | last post: by
5 posts views Thread by Jean Pion | last post: by
3 posts views Thread by Spondishy | last post: by
11 posts views Thread by rfox | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.