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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Missouri
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to Float Boxes on Top of other boxes?

    I was wondering how one floats boxes on top of other boxes. Here is what if have. (picture) As you can see, I want the light green boxes to be on top of the dark one so that it looks all nice and pretty.


    Here are my codes:
    HTML
    Code:
    </head>
    <body>
    	<div class="mainbox">
    	<div id="wrapper">
    	<div id="firstDiv">
    		<div class="greensecbg">
    		<p>This is the heading. You should be puting an image in here that is 		
    
    		a bit smaller than, say, 300px x 200px so that it will fit.</p>
    		</div>
    	</div>
    	<div id="secondDiv">
    			<br><br>
    			<div class="navbar2">
    				<div class="navbartext">
    				<a href="news.html">News</a>
    				</div>
    			</div>
    			<br><br>
    			<div class="navbar3">
    				<div class="navbartext">
    				<a href="media.html">Media</a>
    				</div>
    			</div>
    			<br><br>
    			<div class="navbar4">
    				<div class="navbartext">
    				<a href="downloads.html">Downloads</a>
    				</div>
    			</div>
    			<br><br>
    			<div class="navbar5">
    				<div class="navbartext">
    				<a href="info.html">Info</a>
    				</div>
    			</div>
    			<br><br>
    			<div class="navbar6">
    				<div class="navbartext">
    				<a href="forum.html">Forum</a>
    				</div>
    			</div>
    	</div>
    	</div>
    	</div>
    </body>
    </html>
    CSS
    Code:
    body
    {
    background-color: #bfbfbf;
    color: #fff;
    }
    
    p
    {
    color: #fff; 
    font-size:12px;
    font-family: lucida console;
    margin-left:10px;
    margin-right:130px;
    margin-top:10px;
    margin-bottom:10px;
    }
    
    div.greensecbg
    {
    margin-left: 15px;
    margin-top:15px;
    width:500px;
    height:200px;
    background-color:#50B038;
    border:1px solid #50B038;
    border-radius:20px;
    }
    
    div.mainbox
    {
    background-color: #fefefe;
    width:700px;
    border:3px dotted #f2f2f2;
    border-radius:20px;
    margin-left:auto;
    margin-right:auto;
    }
    
    div.navbar1
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    width:300px;
    float:right;
    position:relative;
    margin-left:600px;
    }
    
    div.navbar2
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar3
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar4
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar5
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar6
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbartext
    {
    margin-left:5px;
    margin-bottom:5px;
    margin-top:5px;
    }
    Thank you..
    Last edited by asbxzeeko; 06-18-2012 at 09:34 AM.


 

Tags for this Thread

Posting Permissions

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