How do I get these 2 divs to be side by side ?

[jeddiki]

How do I get these 2 divs to be side by side ?

I have been trying to apply the float logic to a 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_bo x ) 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.



I hope that you can see where I have gone wrong

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;
}

[drhowarddrfine]

When you set the width of an element, you only set the width of the contents, not the overall width. <div> is a block level element that occupies 100% of its width. To get that to collapse, you'd need to either float it also or do 'position:absol ute'.

[jeddiki]

Thanks,
I put in the float:left; and it did the job :)