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.

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

Answer 1

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/