Page 1 of 1

[56k Warn] CSS full height layout

Posted: Tue Jun 13, 2006 1:52 am
by asgerhallas
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:

Image

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>
And the CSS:

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;
}
Hope somebody has some great idea out there!

/Asger

Posted: Wed Jun 14, 2006 2:17 am
by RobertGonzalez
I heard somewhere on these forums that you can apply a 'clear: both;' to the blocklevel element surrounding your floating elements. Or you can add a non-floated element after the floated element to force the hieght to render the same. I think...