[56k Warn] CSS full height layout
Posted: Tue Jun 13, 2006 1:52 am
Hi,
I have a problem with a full height layout. I have to floats side by side and I want them both to have full height, but if one of them is longer than the other one, it will show like this, when scrolling down:

I've been reading a lot about it, and several places indicates it is just not doable. Does any of you know a way to do it? Which is not Faux Columns - I can't use that technique as I have a background image sticking to the bottom of the page...
The page can be seen here in its present layout:
http://www.asgerhallas.dk/test/frontpage2.php
The code looks like this:
And the CSS:
Hope somebody has some great idea out there!
/Asger
I have a problem with a full height layout. I have to floats side by side and I want them both to have full height, but if one of them is longer than the other one, it will show like this, when scrolling down:

I've been reading a lot about it, and several places indicates it is just not doable. Does any of you know a way to do it? Which is not Faux Columns - I can't use that technique as I have a background image sticking to the bottom of the page...
The page can be seen here in its present layout:
http://www.asgerhallas.dk/test/frontpage2.php
The code looks like this:
Code: Select all
<body>
<div id="container">
<div id="leftBar">
<div id="lb_gfx"></div>
<div id="lb_text">
<p><h1>Something</h1></p>
<p>Someroad</p>
<p>blaaah<br>blaaaah</p>
<p>blah [AT] blah.dk</p>
</div>
</div>
<div id="contentBar">
<div id="topBar"></div>
<div id="menuBar"></div>
<div id="contentArea">
<div id="textArea">
<div id="welcomeText">
<h1>3 column type prob</h1>
<p>
intro<br><br>More stuff:
</p>
</div>
<div id="newsBar">
<h1>News header1</h1>
<div id="newsPic"><img src="img/news_gfx1.jpg" alt="Billedtekst?"></div>
<div id="newsText">text</div>
</div>
</div>
<div id="productArea">
<div id="imgPr1"></div>
<div id="imgPr2"></div>
<div id="imgPr3"></div>
</div>
</div>
</div>
</div>
</body>Code: Select all
/* main sheet */
html, body { /* Needed for Firefox, Safari eg. (Strict mode fix) */
height:100%;
}
body {
margin:0;
padding:0;
width:100%;
text-align:left;
font-family:Trebuchet MS, sans-serif;
font-size:1em;
background-color:#EFEFEF;
color:#000000;
}
/* Specifik core divs */
#container {
float:left;
width:738px;
height:100%;
}
#contentBar {
width:559px;
height:100%;
float:right;
background:#efefef url("img/content_gxf.gif") bottom left no-repeat;
z-index:1;
}
/* Left Bar (lb) */
#leftBar {
background:#972d00 url("img/lb_gfx_bottom.gif") bottom left no-repeat;
width:117px;
height:100%;
float:left;
}
#lb_gfx {
height:85px;
background: url("img/lb_gfx.gif") top left no-repeat;
}
#lb_text {
width:102px;
position:relative;
top:40px;
color:#FFFFFF;
text-align:right;
font-size:0.75em;
}
#lb_text p {
margin-bottom:15px;
}
#lb_text h1 {
font-family:Trebuchet MS, sans-serif;
font-size:0.90em;
}
#topBar {
width:533px;
height:111px;
position:relative;
top:0px;
left:0px;
background:#efefef url("img/topBar_gfx.jpg") center center no-repeat;
margin-top:9px;
margin-bottom:9px;
margin-left:13px;
margin-right:13px;
z-index:2;
}
/* !TEMP: Menu filling */
#menuBar {
width:533px;
height:30px;
position:relative;
top:0px;
left:0px;
margin-left:13px;
background:#efefef url("img/menu.gif") center center no-repeat;
z-index:2;
}
/* Right bar (1 px outline) */
#rightBar {
width: 1px;
height:100%;
background-color:#972d00;
position:absolute;
top:0px;
left:676px;
z-index:3;
}
/** Frontpage specifik tags **/
/* Specifik sheet for frontpage (Scanlux) */
#contentArea {
float:left;
width:595px;
margin-left:13px;
z-index:2;
}
#contentArea h1 {
font-size:2em;
margin-top:20px;
margin-bottom:20px;
}
#contentArea h2 {
font-size:1.5em;
margin-top:20px;
margin-bottom:20px;
}
#textArea {
float:left;
}
#productArea {
float:right;
}
/* Product image holder's 1-3 */
#imgPr1 {
width:125px;
height:125px;
margin-top:95px;
float:right;
background:#efefef url("img/produkt1.jpg") center center no-repeat;
z-index:5;
}
#imgPr2 {
width:125px;
height:125px;
float:right;
clear:both;
margin-top:15px;
background:#efefef url("img/produkt2.jpg") center center no-repeat;
z-index:5;
}
#imgPr3 {
width:125px;
height:125px;
float:right;
clear:both;
margin-top:15px;
background:#efefef url("img/produkt3.jpg") center center no-repeat;
z-index:5;
}/Asger