<!-- m --><a class="postlink" href="http://www.mtn.ncahec.org/test.asp">http://www.mtn.ncahec.org/test.asp</a><!-- m -->
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.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 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->). 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.
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.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 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->). 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.