Reputation: 2570
I have here my CSS code. My problem is that when the content has many things it adjust its height greater than the navigation's height. What i want is when one of this float height adjust it includes the other as well.
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
CSS code below:
#main{
width: 960px;
height: 500px;
margin: auto;
}
#navigation{
float: left;
width: 200px;
background-color: #C7E1BA;
}
#content{
float: right;
width: 740px;
background-color: #F6E4CC;
padding: 10px;
}
#content, #navigation {
height: 100%;
}
#footer{
clear: both;
width: 960px;
height: 100px;
background-color: #628B61;
margin: auto;
}
Upvotes: 1
Views: 5908
Reputation: 31
What a beautiful use case for FlexBox!
#main{
width: 960px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
#navigation{
min-height: 400px;
width: 200px;
background-color: #C7E1BA;
}
#content{
width: 760px;
background-color: #F6E4CC;
}
#footer{
width: 100%;
height: 100px;
background-color: #628B61;
}
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Upvotes: 0
Reputation: 12974
You can set both #navigation
and #content
to display: table-cell
and then get rid of the float
's on both of them. That should do the trick. If you want a minimum height you can just set it on either one of the div
's and the other div
will follow suit. This should work in all browsers and IE8+.
#navigation{
width: 200px;
background-color: #C7E1BA;
}
#content{
width: 740px;
background-color: #F6E4CC;
padding: 10px;
}
#content, #navigation {
display: table-cell;
}
Here's a jsFiddle
Upvotes: 5
Reputation: 12335
Add the same padding to #navigation as that of #content. Edit the CSS class as below
#navigation{
float: left;
width: 180px;
background-color: #C7E1BA;
padding : 10px;
}
Upvotes: 0
Reputation: 1307
try this :
#content{
float: right;
width: 740px;
background-color: #F6E4CC;
padding: 10px;
display:table;
}
Upvotes: 0