Getting 3 frames side by side

Question

Hello all. 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

.latest {
    width:240px;
    padding:5px;
    float: left;
}

something to read http://css.maxdesign.com.au/floatutorial/

Read this, http://css.maxdesign.com.au/floatutorial/clear.htm

This will probably solve your problem

add this in your main div

<div class="clear"></div>

and add this in your style

.clear {
clear: both;
}

Answer 2

Add overflow: auto to the .main div.

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