CSS Layout Query

[gothwalk]

I'm having an interesting CSS issue here in Internet Explorer 6 - not showing in Firefox or Opera.

Extracts from my code:

HTML:

<div id="container">
<div id="info"></div>
<div id="content"></div>
</div>

CSS:

#container {
width: 778px;
position: absolute;
left: 50%;
margin-left: -375px;
border-left: 1px solid #382A7E;
border-right: 1px solid #382A7E;
}
#info {
width: 211px;
float: right;
}
#content {
width: 566px;
border-right: 1px solid #382A7E;
}


Now, what's happening in IE is that the info div is too wide, and is pushing the content div down the page. Reducing the width of the info div by 3 pixels to 208 makes it narrow enough, but this isn't ideal - I need every pixel of that 211.

My first conclusion on some research was that this is a manifestation of IE's box-model problems, wherein it puts borders inside the total width, not outside, so that IE would only see 776 pixels to work with #container. However, widening #container by 2px to give it the "full" 778 didn't work - and leaves some ugly gaps in Firefox and Opera.

The 3-pixel difference does lead to to think that it might be something to do with the borders, though...

Anyone able to explain to me what's happening here?

EDIT: Solved by loupblanc, by adding "float: left;" to #content. Genius!

Comments

[yrthilian.livejournal.com]

did you try setting your border to 0pix or do you need them?

although looking at it you do but it is only a suggestion.

[yrthilian.livejournal.com]

were is this page i might be able to have a look at it if you dontmind that is

[loupblanc.livejournal.com]

As far as I understand this, IE doen't interpret the box model the same way gecko-based browsers do. So the width attribute in IE refers to width of content + width of borders + width of padding. The margins are not included _I think_

Usually, I try to avoid using padding altogether to avoid having to use hacks for IE.

One thing you *might* want to try is use "display: inline" in #container

IE always give me headaches when I code, so good luck.

[gothwalk.livejournal.com]

It's only on a development server at the moment, so you won't be able to see it.

[gothwalk.livejournal.com]

I tried removing the border declaration altogther, and that's still giving the same layout issue - which is downright bizarre, as far as I can see.

[mollydot.livejournal.com]

Probably not much use, but I found increasing #container by 4 worked (though obviously leaving extra space in firefox). Decreasing #content by same amount worked too.

[gothwalk.livejournal.com]

One thing you *might* want to try is use "display: inline" in #container

Good notion, but no luck. :(

IE always give me headaches when I code, so good luck.

It's a foul beast. However, with 97%+ of our clients using it, I've no option but to cater for its foulness.

[mollydot.livejournal.com]

Or 2 works if you remove the margins.

[gothwalk.livejournal.com]

3 seems to be enough for it, which leads me to believe that it's the borders doing the damage. But then I tried it with no borders, and it's still out of place. Hates it, we does, hates it.

[mollydot.livejournal.com]

Tricksy, fat browser.

[loupblanc.livejournal.com]

add float: left; to #content

[gothwalk.livejournal.com]

Perfect! Absolutely fantastic, thanks a million!

[loupblanc.livejournal.com]

No worries :)

I like your method of centering btw, much less clunky than mine :)

[gothwalk.livejournal.com]

The product of much frustration, that. :)

[mollydot.livejournal.com]

Bah. Glad I refreshed the comments before doing a repeat post!

[loupblanc.livejournal.com]

Tell me about it, if my doctype isn't right, my combo of margin: 0px auto and text-align: center won't work.

I might try your solution, see if it works for me when I next have to make a centered website :)