Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    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:



    Hope that someone can help

    My HTML :

    Code:
    <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

    Code:
    .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;
    }

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    .menuCAT {  
     width: 300px;
     margin: 20px 0px 0px 100px ;
     float:left;
    }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Add FLOAT:LEFT; to your style declaration for those divs, like:
    Code:
    .menuCAT {  
     width: 300px; float:left;
     margin: 20px 0px 0px 100px ;
    }

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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 )




    I hope that you can see where I have gone wrong

    The HTML:


    Code:
    <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

    Code:
    .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;
    }
    Last edited by jeddi; 01-30-2009 at 04:57 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •