Forum Moderators: not2easy
I DO use CSS for formatting and occasionally positioning purposes, but on a new site I decided to see if I could do it without tables. It's based on Movable Type, which does its basic content positioning with divs. To make a long story short, I got things looking the way I wanted and decided to do a final check in alternate browsers. Things were a hash in NN4.7, but that didn't bother me. I did a final check in NN7.1, and my @#$%& navigation div displayed below my content. I first assumed that my pixel perfect widths had somehow constrained NN7 and that perhaps it was coming up with 761 pixels for the combined width of the divs in a 760 pixel body, but even removing the body width specification didn't fix it. Here's what I've got:
Correct display (IE):
top-top-top-top-top-top
top-top-top-top-top-topcontent-content nav-nav
content-content nav-nav
content-content nav-nav
content-content nav-nav
content-content nav-nav
content-content nav-nav
What I get in NN7.1:
top-top-top-top-top-top
top-top-top-top-top-topcontent-content
content-content
content-content
content-content
content-content
content-content
nav-nav
nav-nav
nav-nav
nav-nav
My CSS (with what I hope was irrelevant stuff removed) looks like:
body {
margin:20px 20px 20px 20px;
background:#EEE;
}
#top {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
padding:15px;
}
#content {
float:left;
position:relative;
width:515px;
margin-right:15px;
margin-bottom:20px;
border:1px solid #FFF;
}
#nav {
padding:15px;
border:1px solid #FFF;
width:190px}
Any ideas why IE loves this & NN doesn't?
As for why NS (and Mozilla Firefox and probably Opera) don't like it, you need to float your #nav.
You can float it left or right. If you float it left, the containing element must come after the containing element for #content.
If you float it right, you will likely want a container element that contains everything and sets the overall width, otherwise on large screens, like mine or larger (over half of all screens out there), the opposing floats will leave a huge space in between the two elements.
content = 523px (depending on doctype in IE)
nav = 207 px (ditto)
left over space on my monitor = about 250px after scroll bar etc.
With opposing floats, that space comes right in the middle.
Tom
since the top element covers (or should) the whole page, you probably want to use that for your separating border. I think that's what you are striving for, since the way it is now, you have two boxes floating under an upside-down open box. Does that make any sense at all? In other words, the border is not continuous between #top and the rest of the page.
#top, #content, #nav {
border:1px solid #FFF;
}
#content, #nav {
border-top:0px none;
}
