Problem with getting 2 menus side by side

Hi
I have 2 menu listings and they keep appearing underneath each other.

How do I get them to appear side by side ?

This is what they look like now:

http://www.devchoice.info/images/scn06.jpg

Hope that someone can help :)

My HTML :


<div class="pg_whole">
<span class="cat">Category: <?php echo $Dcat ?></span>
<div class="menuCAT">
<ul>
<li> <a href="/internet_marketing/tutorials/Traffic/tutes.html" >Traffic </a></li>
<li> <a href="/internet_marketing/tutorials/S.E.O./tutes.html" >S.E.O. </a></li>
<li> <a href="/internet_marketing/tutorials/Niche/tutes.html" >Niche </a></li>
<li> <a href="/internet_marketing/tutorials/Affiliate/tutes.html" >Affiliate </a></li>
<li> <a href="/internet_marketing/tutorials/P.P.C./tutes.html" >P.P.C. </a></li>
</ul>
</div>

<div class="menuCAT">
<ul>
<li> <a href="/internet_marketing/tutorials/Copy writing/tutes.html" >Copy writing </a></li>
<li> <a href="/internet_marketing/tutorials/Product creation/tutes.html" >Product creation </a></li>
<li> <a href="/internet_marketing/tutorials/Website Design/tutes.html" >Website Design </a></li>
<li> <a href="/internet_marketing/tutorials/Graphics/tutes.html" >Graphics </a></li>
</ul>
</div>
</div>


and CSS


.pg_whole{
width: 880px;
font-weight: normal;
margin: 0px auto;
float: left;
}

.cat{
font-size: 16px;
font-weight: bold
width: 300px;
text-align: left;
float:left;
}

.menuCAT {
width: 300px;
margin: 20px 0px 0px 100px ;
}

.menuCAT ul{
padding: 0;
list-style-type: none;
margin: 10px 0px 0px 0px;
}

.menuCAT ul li {
text-align: left;
}

.menuCAT ul li a{
font-size: 14px;
color: #347EED;
font-weight: bold;
text-decoration: none;
padding: 4px 6px 4px 6px;
}


.menuCAT ul li a:visited{
color: #666699;
}

.menuCAT ul li a:hover {
color: #fff;
background: #6699cc;
text-decoration: none;
}

.menuCAT {
width: 300px;
margin: 20px 0px 0px 100px ;
float:left;
}

Add FLOAT:LEFT; to your style declaration for those divs, like:

.menuCAT {
width: 300px; float:left;
margin: 20px 0px 0px 100px ;
}

Both responses are correct. Here is why:

The default behavior of a block level item is to start on a new line. That's logical - you want paragraphs to be below and not beside eachother. To get two (or more) block level items side by side you have to tell them to ignore the default and do something else.

"Float" tells them to do that. It says to put them side by side for as many as will fit in the container (page or other div). The one additional rule is you have to tell the div how wide it is. If the only thing in a div is an image, it will just take the width from that, otherwise you must provide it.

Eventually, you might want a floated item to be below other items even when there is room for it to fit in. You do that with the "clear" attribute so it will clear off of the line to a new one.

Hi,
Thanks for your help.

I have been trying to apply that logic to another couple
of divs on the same screen, but without success.

There is a main div that holds two sub-divs

The LHS sub-div ( class= listerTop) is a listing and
the RHS sub-div i( class=ad_big_box ) is a set of images.

For some reason the RHS div insists on floating right only after (i.e. below)
the LHS div even though there is space on the RHS for it.

Here is an image, it just shows the bottom of the list on the LHS and the
top of the images on the RHS.

unfortuately I can not give the url
as you'd need to sign in. ( of course if thats the only way I can
post a user name and password )

http://www.devchoice.info/images/scn07.jpg


I hope that you can see where I have gone wrong :o

The HTML:



<div class="page_name">
Resources - tutorials
</div> <!-- End div: page_name -->

<div class="pg_whole">
<span class="cat">Category: Traffic</span>
<div class="menuCAT">
<ul>
<li> <a href="/internet_marketing/tutorials/Traffic/tutes.html" >Traffic </a></li>

<li> <a href="/internet_marketing/tutorials/S.E.O./tutes.html" >S.E.O. </a></li>
<li> <a href="/internet_marketing/tutorials/Niche/tutes.html" >Niche </a></li>
<li> <a href="/internet_marketing/tutorials/Affiliate/tutes.html" >Affiliate </a></li>
<li> <a href="/internet_marketing/tutorials/P.P.C./tutes.html" >P.P.C. </a></li>
</ul>

</div>

<div class="menuCAT">
<ul>
<li> <a href="/internet_marketing/tutorials/Copy writing/tutes.html" >Copy writing </a></li>
<li> <a href="/internet_marketing/tutorials/Product creation/tutes.html" >Product creation </a></li>
<li> <a href="/internet_marketing/tutorials/Website Design/tutes.html" >Website Design </a></li>

<li> <a href="/internet_marketing/tutorials/Graphics/tutes.html" >Graphics </a></li>
</ul>
</div>

<div class="listerTop">
<div class="listerdiv">
<span class= "lk">1 ) <a href="/internet_marketing/online_tuition/traffic/1.html">Get Tons of Traffic Tute 1</a></span>
<span class= "by">By <a href="/internet_guru/fred flintstone/Fred.html">fred flintstone</a></span>
</div>

<div class="listerdiv">
<span class= "lk">2 ) <a href="/internet_marketing/online_tuition/traffic/2.html">Get Tons of Traffic Tute 2</a></span>
<span class= "by">By <a href="/internet_guru/fred flintstone/Fred.html">fred flintstone</a></span>
</div>
<div class="listerdiv">
<span class= "lk">3 ) <a href="/internet_marketing/online_tuition/traffic/3.html">Get Tons of Traffic Tute 3</a></span>
<span class= "by">By <a href="/internet_guru/dave casey/Dave.html">dave casey</a></span>
</div>
</div> <!-- End div: listerTop -->

<div class="ad_big_box">
<div class="adbox">
<br><br>
</div>
<div class="adbox">
<img alt="Cat" src="/images/gurut01.jpg" height="163" width="163" />
This is a product advert slot that I put in
</div>

<div class="adbox">
<img alt="Cat" src="/images/gurut02.jpg" height="163" width="163" />

This is a product advert slot that I put in
</div>

<div class="adbox">
<img alt="Cat" src="/images/gurut03.jpg" height="163" width="163" />
This is a product advert slot that I put in
</div>

<div class="adbox">
<img alt="Cat" src="/images/expert01.jpg" height="163" width="163" />
This is a product advert slot that I put in
</div>

</div> <!-- End div: ad_big_box -->
</div> <!-- End div: pg_whole -->



and the CSS


.pg_whole{
width: 880px;
font-weight: normal;
margin: 0px auto;
float: left;
}

.listerTop {
width: 360px;
}

.listerdiv {
width: 340px;
text-align:left;
padding: 15px 0 15px 50px;
}

.lk{
font-size: 14px;
width: 280px;
text-align:left;
}

.by{
width: 280px;
font-size: 12px;
text-align:left;
float:right;
}

.ad_big_box{
width: 300px;
padding: 10px;
float:right;
}


.adbox{
width: 260px;
margin: 0px auto;
padding: 30px ;
float:right;
}