Two-column, right-nave, FF

[janetb]

http://www.mtn.ncahec.org/test.asp

Trying to modify a 2-column, right-nav layout for an intranet that needs to scale for various screen sizes and resolutions, so I'm trying to use % and only a fixed width for the right-nav. IE depicts close to what I want, but FireFox throws the right/left floats out? (These are the only two browsers I have to worry about for an Intranet.)

It's probably something conflicting with padding/margins? Anybody got a solution?

Thanks so much.

[toicontien]

For this basic HTML structure:

<div id="wrap">
<div id="header"></div>
<div id="sidebar">
<div id="sidebarBox">
Side bar content
</div>
</div>

<div id="main">
<div id="mainBox">
Main content
</div>
</div>
<div id="footer">
Footer content
</div>
</div>

You'll need the following CSS to create the basic layout:

#footer {
clear: both;
}

#main {
margin-right: 180px;
}

#mainBox {
border-right: 1px solid #000;
padding: 15px;
}

#sidebar {
float: right;
width: 180px;
}

#sidebarBox {
padding: 3px; 3px 3px 5px;
}

You were probably butting your head against the CSS Box model (http://www.w3.org/TR/CSS21/box.html#box-dimensions). Get well acquainted. IE6-Win gets the box model correct in standards mode (DOCTYPE at the beginning of the document) and IE5-Mac does regardless.

IE6 in quirks mode (No DOCTYPE at the beginning of the document) and IE5-Win get the box model incorrect. Padding and borders are absorbed into the width: declaration.

Leaving #main as a block element and unfloated means the browser will calculate the width for you. Just give it a right margin equal to #sidebar's width.