Menu
Hie Everyone
I am designing a webpage with a fluid layout. I want to keep a 100% width and a 100% height. The problem is i dont know how to keep divs "left" and "right" with a 100% height inside their parent div, "wrapper".
<div id="container" style="width:100%; height:100%">
<div id="header" style="width:100%; height:100px">
</div>
<div id="wrapper" style="width:100%; height:(100% - 100px)">
<div id="left" style="width:250px; height:(100% - 100px)">
</div>
<div id="right" style="width:(100% - 250px); height:(100% - 100px)">
</div>
</div>
</div>
Please help.
Answer from doctype.com
CSS
html, body{
height: 100%;
margin: 0;
padding: 0;
}
HTML
<body>
<div id="container" style="width:100%; height:100%; position: absolute;">
<div id="header" style="width:100%; height:100px;">
header
</div>
<div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
<div id="left" style="width:250px; height:100%; float:left;">
left
</div>
<div id="right" style="width: 250px; height:100%; float:right; ">
right
</div>
main content
</div>
</div>
</body>
557
If I'm understanding correctly, you want to float divs right and left inside your wrapper div, but retaining the wrapper div's full height in the screen?
If so, the right and left div of course go inside the wrapper, and you use { ... float: left; position: relative;} and {... float: right; position: relative;} to float them to the sides.
Now, because you've floated these two divs which are part of the content of your wrapper div, the wrapper itself may have zero height. This is because the two divs inside "float out of it". To give your wrapper the same height as the two divs inside have, you can EITHER:
<div style="clear: both;"></div>
ORNow you've "cleared the floats" and your wrapper has the full height of the two divs inside.
IF ON THE OTHER HAND, you want all your content to stretch to the full height of the screen always without regard to what you've put in there, you'll need to do some CSS magic and it gets too complicated to explain without seeing your code. Start here: http://ryanfait.com/sticky-footer/
Hope that helps.
155
If you make all elements in the same level be 100% width and height you'll get unexpected behavior between browsers. With the example you've given you're trying to give header and wrapper all the space within the parent.
100% container
+----------------------------+
| 100% header 100% wrapper |
| +----------+ +-----------+ |
| | errr...? | |
| +----------+ +-----------+ |
+----------------------------+
How is that supposed to be possible really? There are several ways of doing this either:
So you need to be more specific when giving percentages.
By the way have you tried floating your elements?
position: relative; // or absolute
float: left;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
