I have a web page with one big container for the entire page. Inside that <div> I have another <div> with float:left. Then, floating to the right of that child <div> I have a second container that will contain other <div>s. The secondary container is collapsing. I have searched and tried other solutions, but they didn’t solve anything. BTW this is an html5 page <!DOCTYPE html>. Any ideas?
CSS:
body {
border: 0px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
font-family: Hanuman;
}
#container {
margin: 0 auto;
background: red;
height: 100%;
width: 100%;
overflow: hidden;
}
#bibletree {
padding: 0;
margin: 0;
height: 100%;
width: 15%;
float: left;
background: blue;
overflow: auto;
white-space:nowrap;
}
#container2 {
margin: 0 auto;
height: 100%;
width: 85%;
background: gray;
float: right;
overflow: auto;
}
html:
<div id="container">
<div id="bibletree">
stuff here
</div>
<div id="container2">
there will be two other divs here as well. This one is collapsing.
</div>
</div>
Hi now give to
bodyandhtml height 100%As like this
Demo