Sat, 2012-02-25 12:15
hello,
im having trouble with 100% height.
i want #left, #middle and #right to all be 100% height inside the #wrapper.
another problem is i my wrapper seems to disappear if i dont use float:left . i want to use margin: 0 auto;
thanks..
this is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>One Hundred Percent height divs</title> <style type="text/css" media="screen"> body { margin:0; padding:0; height:100%; /* this is the key! */ } #wrapper{ border: 1px solid #ccc; width: 980px; background-color: #f9f9f9; height:100%; float: left; } #left, #middle, #right { position:relative; text-align: left; *display: inline; vertical-align: bottom; border: 1px solid #ccc; } /***************************************/ /******* SET FLOAT LEFT / RIGHT ********/ /***************************************/ /*** SET LEFT ***/ #left{ float: left; display: inline; width: 200px; height: 100%; } /*** SET MIDDLE ***/ #middle { float: left; display: inline; width:570px; height: 100%; } /*** SET RIGHT ***/ #right{ float: right; display: inline; width: 200px; height: 100%; } p {padding: 5px;} p.top { margin-top:20px; } </style> </head> <body> <div id="wrapper"> <div id="left"> <p class="top">some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> </div> <div id="middle"> <p class="top">some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> </div> <div id="right"> <p class="top">some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> </div> <div class="clear"></div> </div> </body> </html>
Sun, 2012-02-26 20:34
#1
The only way I believe that
The only way I believe that this can be done is by using javascript. Nevertheless here is the code to make it work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <script type='text/javascript'> function load(){ document.getElementById('body').style.height = (window.innerHeight - 4) + "px"; } </script> <title>One Hundred Percent height divs</title> <style type="text/css" media="screen"> body { margin:0; padding:0; } #wrapper{ border: 1px solid #ccc; width: 980px; background-color: #f9f9f9; clear:both; height:100%; margin:0px auto; } #left, #middle, #right { text-align: left; vertical-align: bottom; border: 1px solid #ccc; } /***************************************/ /******* SET FLOAT LEFT / RIGHT ********/ /***************************************/ /*** SET LEFT ***/ #left{ float:left; width: 200px; height: 100%; } /*** SET MIDDLE ***/ #middle { float:left; width:570px; height: 100%; } /*** SET RIGHT ***/ #right{ width: 200px; height: 100%; float:right; } p {padding: 5px;} p.top { margin-top:20px; } </style> </head> <body onload='load()' id='body'> <div id="wrapper"> <div id="left"> <p class="top">some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> </div> <div id="middle"> <p class="top">some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> </div> <div id="right"> <p class="top">some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> <p>some text some text some text some text some text some text some text some text some text</p> </div> <div class="clear"></div> </div> </body> </html>
Hope this helps
Pete
Mod edit: Don't post off-topic links to your own site