Question

I have a frame which is 760px wide.
I then have a div called main inside that which is 750px wide and has padding of 5px.

.main {
width:750px;
background-color:#FFF;
border-style:solid;
border-width:thin;
padding:5px;
margin-bottom:10px;

}

I then have a div inside that called latest which i want 3 side by side.

.latest {
width:240px;
padding:5px;

}

If I put float:left on the latest div, it ends up with them being outside of the main.

<div class="main">
    <div class="latest">
        asdasdas
    </div>

    <div class="latest">
        asdasdas
    </div>

    <div class="latest">
        asdasdas
    </div>
</div>

The code i use to put it all together.
I cant think of anything else.
Thanks for reading, hope you can help!

Answer 1

Add overflow: auto to the .main div.

More explanation here: http://gtwebdev.com/workshop/floats/enclosing-floats.php