Menu
I would like to set the 2-columns divs with the same height than container (without using px of course)
HTML
<body>
<div id="container">
<div id="hdr-lay">
Header
</div>
<div id="left-column">
Grid Layout left
</div>
<div id="right-column">
Grid Layout right
</div>
</div>
</body>
CSS
#hdr-lay {
_background-color: red;
}
#container {
background-color: gray;
height:100%;
width:100%;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
}
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
}
http://jsfiddle.net/g3gxv4j2/
Perhaps it would be easier to do itwith no ?
I would like to set the 2-columns divs with the same height than container
Since your container have height:100%, I assume you want the same for your child div's
Give 100% height to your html and body
html,body{
height:100%
}
You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}
Here's the fiddle
Cheers!
153
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
