...

View Full Version : Resolved How to Float Boxes on Top of other boxes?



asbxzeeko
06-18-2012, 06:11 AM
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.
http://www.iaza.com/work/120618C/iaza19163844152300.png

Here are my codes:
HTML


</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



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..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum