TommyWillB
Registered
Okay, I'm about 6 steps into an effort to redo a section of my site... And while I swear I started out using a DIV/CSS based layout that worked in ALL browsers suddenly that is no longer the case.
What I'm trying for is a navigation bar that stays fixed to the left... to the right of it are esentially 4 stacked areas:
1) the top header should stay glued to the top.
2) a middle content area that should flex reletive to the things around it
3) the second-from the bottom thing stays glued to the bottom, but has a bottom margin to place it above the footer.
4) the bottom footer should stay glued to the bottom.
It works in all of my Mac browsers (Safari, Firefox, IE) as well as Firefox for windows. But IE 6.x for Windows insists on displaying all of the right-side elements way down the page... below the end of the left navigation. I simply can not force it to float/wrap to the right.
Here is what I've got: http://digipix.jeffntom.com/TEMPLATE_UI-5.php
Ignore the whiz-bang JavaScript stuff displaying the images, etc... and help me figure out what's up with my DIV/CSS?
Here is the Div structure:
Here is the CSS:
What I'm trying for is a navigation bar that stays fixed to the left... to the right of it are esentially 4 stacked areas:
1) the top header should stay glued to the top.
2) a middle content area that should flex reletive to the things around it
3) the second-from the bottom thing stays glued to the bottom, but has a bottom margin to place it above the footer.
4) the bottom footer should stay glued to the bottom.
It works in all of my Mac browsers (Safari, Firefox, IE) as well as Firefox for windows. But IE 6.x for Windows insists on displaying all of the right-side elements way down the page... below the end of the left navigation. I simply can not force it to float/wrap to the right.
Here is what I've got: http://digipix.jeffntom.com/TEMPLATE_UI-5.php
Ignore the whiz-bang JavaScript stuff displaying the images, etc... and help me figure out what's up with my DIV/CSS?
Here is the Div structure:
Code:
<div id="leftnav">
...leftnav stuff...
</div>
<div id="rightbody">
<div id="header">
1) Right-Top: ...header area...
</div>
<div id="content">
2) Right-Middle: ...large image area...
</div>
<div id="thumbnails">
3) Right-Lower: ....image thumbnail area...
</div>
<div id="footer">
4) Right-Bottom: ...footer area...
</div>
</div>Here is the CSS:
Code:
#leftnav {
margin: 0;
padding: 0;
position: fixed;
top:0px;
width: 200px;
bottom: 1px; // this locks the div to the browser bottom (minus 1px)
float: left;
background:#cccccc;
valign: bottom;
}
/* this is a contain that holds everything except the left navitation */
#rightbody {
/* width: 100%; */
}
#header {
position: fixed;
top: 0px;
margin-left: 212px;
margin-right: 0px;
background: #ffffff;
}
#content {
margin-top: 60px;
margin-left: 212px;
margin-right: 0px;
background: #ffffff;
}
#thumbnails {
position: fixed;
bottom: 51px;
margin-left: 210px;
margin-right: 10px;
background: #ffffff;
}
#footer {
position: fixed;
bottom: 0px;
margin-left: 200px;
margin-right: 10px;
background: #ffffff;
}