Forum Moderators: not2easy
I am having a problem with getting 3 divs on my page to all stretch to 100%. I have every div set to 100% height, a wrapper div around all 3 set to 100% height. Is there a way to get this to work?
Here is a link to the problem: <>
Or the code:
CSS:
html,body{margin:0;padding:0; height: 100%;}
body{font:12px/16px Tahoma, Arial, Helvetica, Trebchet 'MS', Verdana,sans-serif;color:#333333;}
div#navigation{float:left;width:242px; height:100%; background:#999999; line-height:15px; }
div#wrapper{height:100%;}
div#container{width:968px; height:100%; margin:0 auto}
div#content{float:right;width:184px; height:100%; background:#fffde5;}
div#capabilities{float:right;width:154px; height:100%; padding-left:20px; padding-right:10px; background:#fffde5;}
div#main{float:left;width:538px; height:100%;}
div#footer2{float:left; width:100%; margin-top:40px;}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<link rel="stylesheet" type="text/css" href="csssimp.css">
</head>
<body>
<!-- container-->
<div id="container">
<!-- wrapper-->
<div id="wrapper">
<!-- content-->
<div id="capabilities">
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
</p>
</div>
<!-- close content-->
<!-- nav-->
<div id="navigation">
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<br /><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<br /><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
<div id="footer2"><a href="index.html" class="color">Home</a> ¦ <a href="about.html" class="color">About</a> ¦ <a href="careers.html" class="color">Careers</a> ¦ <a href="links.html" class="color">Links</a> ¦ <a href="legal.html" class="color">Legal</a> ¦ <a href="privacy.html" class="color">Privacy</a> ¦ <a href="contact.html" class="color">Contact</a> </div>
</div>
</div>
</div>
</body>
</html>
thanks in advance...
[edited by: SuzyUK at 11:34 am (utc) on July 1, 2008]
[edit reason] no personal URI's please, see charter [/edit]
I am having a problem with getting 3 divs on my page to all stretch to 100%. I have every div set to 100% height, a wrapper div around all 3 set to 100% height. Is there a way to get this to work?
no, not without using "faux columns" or a table
the thing is your html and body elements (think your viewport) are 100% tall, anything over and above that i.e. your "center column" is overflowing the body element, the left and right columns will also overflow should they get taller (or the screen size get smaller) try adding more text or rezing the window to see them go beyond their background "colors"
This is a common question and there's a often a misunderstanding about "columns" because of table layouts - it's not that you need the columns to be 100% high so much, that would be restrictive think about a small screen, it's that you need them to be the same height as each other WITH a MINIMUM height of 100%,
That's a tall order and is not possible with floats. Floats are not in the flow (that's why they need clearance) they do not know of the existence of sibling floats/elements though you can probably use a script to find heights.
The Faux Column technique is simply a repeating background image down the back of the container element of the floats, which are then cleared, this means the container will always be as high as the longest column. Then it's easier to get the minimum 100% requirement onto it too. It needs to be min-height so that once you pass that (different browsers resolutions) the background continues to stretch.
:)
Shawn
