CSS Layout height

Question

I need to have two columns inside a <div>:

CURRENT HTML

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>

    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>

</div>

CURRENT CSS

#corpo {
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

#corpo_esquerdo {
    width: 650px;
    float: left;
    border: #bababa solid 2px;
}
#corpo_direito {
    width: 300px;
    float: right;
    background-color: #bababa;
    border-radius: 5px;
    color: #f5f5f5;
    padding: 5px;
}

But the div#corpo_esquerdo and div#corpo_direito crosses the div#corpo.

crossing div

How can I do it, in order to have the div#corpo_esquerdo and div#corpo_direito don't cross the div#corpo?

If you mean you would like `div#corpo` to get the height of the content your could try to add a `
` after the `div#corpo_esquerdo` container. — Cyclonecode, May 30 '12 at 17:42
this is happening becoz the float inside `div#corpo` is not cleared. — Saurabh Kumar, May 30 '12 at 17:42
I dont get the question too well. You whant the body tag to contain the column elements or you are talking about the order of the left and right columns? — Shiin Zu, May 30 '12 at 17:42

score 3 · Accepted Answer · answered May 30 '12 at 17:47

You can also add overflow:auto to the #corpo div

#corpo {
    overflow:auto;
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

See the result here: http://jsfiddle.net/nF5vZ/

score 2 · Answer 2 · answered May 30 '12 at 17:40

2

If you apply overflow:hidden to a parent container that contains floated children, the parent will expand to fit its children.

#corpo {
    overflow: hidden;
    /* the rest of your definition */
}

answered May 30 '12 at 17:40

JoJo

19,587
34
106
162

this does not takes care of the IE...!! read more about it here http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – Saurabh Kumar May 30 '12 at 17:56
Only IE6 can't handle it. Most people have dropped support for IE6. – JoJo May 30 '12 at 17:59

score 2 · Answer 3 · answered May 30 '12 at 17:45

2

Try clearing the content like this:

<div id="corpo">
  <div id="corpo_esquerdo">
  your text
  </div>
  <div id="corpo_direito">
  your text
  </div>
  <!-- clear -->
  <div style="clear:both;"></div>
</div>

answered May 30 '12 at 17:45

Cyclonecode

29,115
11
72
93

score 1 · Answer 4 · answered May 30 '12 at 17:40

1

the best efficient way IMO is to apply overflow attribute

#corpo_esquerdo {
    width: 650px;
    float: left;
    border: #bababa solid 2px;
    overflow: hidden;
}

answered May 30 '12 at 17:40

heximal

10,327
5
46
69

score 1 · Answer 5 · answered May 30 '12 at 17:40

1

Try adding:

overflow:hidden;

to your #corpo_esquerdo and #corpo_direito divs.

answered May 30 '12 at 17:40

Jared

301
1
13

Bosworth99 · Answer 6 · 2012-05-30T17:51:44.843

Two things are going on here.

One - if you want to hide contents outside the borders of the parent, as others have noted, use overflow:hidden.

Two - You are also experiencing the collapse effect from floating elements within a container. The idea is that the floating elements are taken out of natural page flow (like absolutely positioned item). The height of those items then do not force the parent element to expand vertically.

If you want the height of the parent to expand, use apply clearfix class to the parent element.

ie: <div id="corpo" class="clearfix">

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}

Additionally, you can insert another element below the floated elements that is still in the natural page flow with clear:both css rulle applied (as others have noted). I don't like this solution because you have to use extraneous elements to make it work.

score 1 · Answer 7 · answered May 30 '12 at 17:47

Add <div style="clear:both"></div> before you close your outer div:

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>


    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>
    <div style="clear:both"></div>

</div>

Here is a demo: http://jsfiddle.net/MU7hn/

this i won't recommend because of it's non-standard markup....it a quick but dirty solution.... more can be read here.. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — Saurabh Kumar, May 30 '12 at 17:59

score 0 · Answer 8 · answered May 30 '12 at 17:50

0

checkout the solution on jsFiddle: http://jsfiddle.net/Rzw44/

It basically apply a clearfix on the parent div containing floated div's children.

You can read more about the solution here

answered May 30 '12 at 17:50

Saurabh Kumar

5,576
4
21
30

CSS Layout height

8 Answers8