Simple CSS Layout
Question by Louis
I need to find a cross browser way of having two divs contained in a parent div where the first child has a fixed height and the second flows down to be contained in the parent.
<div id="parent"><div id="header"></div><div id="body"></div></div>
height: 500px
_____________________
| _________________ |
| | height: 20px | |
| |_________________| |
| _________________ |
| | | |
| | | |
| | height: 100% | |
| | | |
| | | |
| |_________________| |
|_____________________|
So the parent has a fixed height of 500px, the header div has a fixed height of 20px but the body div’s height must flow down to fit inside the parent. Giving it a height of 100% overflows it’s height by 20px because height:100% uses the parents height not taking into account the children. I saw a solution using position absolute but this does not work on IE7 or 6. Is there a cross browser solution for this as it is a relatively simple layout?
Edit: Forgot to mention that the parent will be resizable so will not always be 500px. Using jquery resizable, the parent dimensions could be anything and will change often.
Edit 2: I wish I could credit multiple people for this solution as I took advice from everyone. Basically I gave #body a height of 480px and used the alsoResize option in resizable to resize the parent and the body.
Answer by loxxy
.parent { height : auto; }
.child1 { height : 20px; }
.child2 { height : 480px; }
Instead of setting the size of the parent dynamically, control child2’s height.
Hope that is what your asking for.
Edit: Edited as per your update!
Answer by Starx
If you already know the height of outer container, and the one of height of the divisions inside, you can know the height of the remaining div I think.
try something like this height: 480px;. Keep it simple and easy
