CODEWITHSUNDEEP
htmlcsscss-float
Ikong
Ikong

Reputation: 2570

CSS float height auto adjustments

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

Answers (4)

davemaloney
davemaloney

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

Mathijs Flietstra
Mathijs Flietstra

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

mohkhan
mohkhan

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

GilbertOOl
GilbertOOl

Reputation: 1307

try this :

#content{
    float: right;
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
    display:table;
}

Upvotes: 0

Related Questions