[css-d] floats making rows, not columns.

[nooluyo?]

This page should be something like this:
Featured Magazines                            Must Read
                                                          Headline

but everything keeps going under Featured Magazines Section.

You can see by yourself @ http://www.alpalp.com/css3/tablecss.html

what is wrong; i've already gave magazines-home float:left and mustread 
float:left, so they should be columns, not rows.

any help greatly appreciated.

thanks,
alp

============================css============================
.content-main{
width:100%;
border-color:#000000;
}
.magazines-home{
float:left;
width:250px;
}
.featuredmags{
background-color:#bed0eb;
width:250px;
}
.mustread{
float:left;
width:100%;
text-align:left;
}
============================css============================

============================cut============================

<div class="content-main">

<!-- overall magazine block start-->
<div class="magazines-home">
<h1>Featured Magazines</h1>


<!-- magazine block start -->
        <div class="featuredmags">

        <!-- repeat 3 times start-->

                <div class="magframe-margin" style="float:left;">
                        <div class="magimage"><img 
src="images/mags/national_enquirer.gif" width="68" height="90" class="minimag" 
/></div>
                        <div class="magframecontent">Details Magazine<br />
                                <span class="magprice">$9.97</span>
                                <span class="buyround"><a href="buy.html" 
class="buynow">BUY NOW</a></span>

                        </div>
                </div>
        
                <div class="magframe" style="float:right;">
                        <div class="magimage"><img 
src="images/mags/national_enquirer.gif" width="68" height="90" class="minimag" 
/></div>
                        <div class="magframecontent">Details Magazine<br />
                                <span class="magprice">$9.97</span>
                                <span class="buyround"><a href="buy.html" 
class="buynow">BUY NOW</a></span>

                        </div>
                </div>
        
        <!-- repeat 3 times end -->

        </div>
<!-- magazine block end -->

</div>
<!-- overall magazine block end -->

<div class="mustread">
<h1>Must Read</h1>
<p class="headcontent">Vogue Magazine bla bla</p>
<h1>Headline</h1>
<p class="headcontent">Lorem ipsum bla bla</p>

</div>
</div>

============================cut============================
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/