Sent by Paulo Nobre on 27 November 2006 17:05
Hi, i'm trying to get this layout to work with css for weeks without
100% success..
the layout is +- like this:
+--------++---------------------------------------+
| | | |
| left | | Header |
| | +---------------------------------------+
| | +-----------------------------+--------+
| | | | |
| | | Content |Right |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
+--------++------------------------------+-------+
+---------------------------------------------------+
| Footer |
+---------------------------------------------------+
left column: fixed width;
right color: fixed width;
header: fixed height;
footer: fixed height;
the content/header/footer width, will expand/shrink (with a min width
constraint);
left/content/right height will expand/shrink to fit content (being all
the same height);
my last aproach, works nice in ie7/ff (with some js to get the columns
at the same height). however in IE6, if the width come below the min,
the content is pulled down and its all a mess.
this is what i have until now:
markup:
<div id="pageContainer">
<div id="header"></div>
<div id="left"></div>
<div id="contentContainer">
<div id="right"></div>
<div id="center"></div>
</div>
<div id="footerContainer"></div>
</div>
css:
html,body {
margin: 0;
padding: 0;
background-color: White;
font-size: 100%;
}
#pageContainer {
margin: 0;
min-width: 987px;
}
#header {
margin: 5px 5px 0 200px;
height: 100px;
border: 1px solid black;
border-bottom: none;
}
#left {
margin: 5px;
margin-top: -101px;
width: 190px;
float: left;
}
#contentContainer {
margin-left: 200px;
margin-right: 5px;
border: 1px solid black;
border-top: none;
}
#right {
width: 200px;
float: right;
}
#center {
margin-right: 200px;
padding: 0 10px;
}
#footer {
height: 70px;
clear: both;
}
can anybody help with this ?
thanks a lot,
pn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
