CODEWITHSUNDEEP
htmlcsscss-floatheight
Tyharo
Tyharo

Reputation: 383

Div not Adjusting Height Based on Contents

I can't seem to figure out why my info-container div won't adjust its height based upon its contents. I do have a floating div within it and I think it might be causing the problem, but I'm not completely sure. I have a link to jsfiddle where you can see the CSS and some HTML if it helps. Any help is greatly appreciated!

Here is the CSS for the info-container ID holding the float and all other information

    #info-container{
    position:relative;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    margin-left:auto;
    margin-right:auto;
    background:#6F90A2;
    min-width:1000px;
    max-width:1000px;
    clear: both;
    height:auto;
}

http://jsfiddle.net/r35K4/

Upvotes: 12

Views: 55019

Answers (4)

Alexander O'Mara
Alexander O'Mara

Reputation: 60527

You need what is known as the CSS clearfix. This can be achieved with the following CSS.

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

Working Example

This will create a pseudo element that will force the wrapper to wrap the floated children.

This is arguably a cleaner solution that adding an overflow property, as the overflow property has other uses and depending on the case can cause problems with hidden overflow or internal scrollbars.

Upvotes: 4

aniskhan001
aniskhan001

Reputation: 8521

#info-container{
    overflow: auto;
}

Upvotes: 7

Roko C. Buljan
Roko C. Buljan

Reputation: 206038

jsBin demo

Create a CSS class:

.clear:before,
.clear:after {
  content:" ";
  display:table;
}
.clear:after {
  clear:both;
}

and simply apply it to your 

<div id="info-container" class="clear">

or to any other element that contains Floated elements which you're having problems with.

If you want to do it simpler, use

overflow : auto;

for any parent element containing floated children, if you're able to do so due to the fact that will become an overflow element

Upvotes: 2

j08691
j08691

Reputation: 207891

Add overflow:auto; to #info-container.

jsFiddle example

Floating the child element removes it from the document flow and the parent will collapse. By adding the overflow rule, the desired behavior is restored.

Upvotes: 44

Related Questions