By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

Two Column layout has extra space in IE

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
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

P: n/a
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.