Menu
In the past if have created two side by side areas with another area that was below and spanned the side by side areas using fixed positioning. That worked because the side by side areas were of a fixed length.
I now want to do the same but with the side by side areas of arbitrary length. I can get close, but the right area is to the right and “below” the left area.
Here is the code I have:
<div class=”left”>
<p>Test text</p>
</div>
<div class=”right”>
<p>More test text</p>
</div>
<br />
<hr align=”center” width=”756″ size=”1″ noshade=”noshade” />
<p class=”nav_bottom” align=”center”>This text is a placeholder</p>
My style sheet includes:
div.left
{
position:relative;
left:0px;
width:500px;
height:auto;
margin:0px 0px 0px 0px;
padding:10px 0px 10px 0px;
background-color:#CCCCFF;
overflow:auto;
z-index:1;
}
div.right
{
position:relative;
left:510px;
width:246px;
height: auto;
margin:0px 0px 0px 0px;
padding:10px 0px 10px 0px;
background-color:#CCCCFF;
overflow:auto;
z-index:2;
}
.nav_bottom {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
position:relative;
}
In summary, I get the left and right areas but the right starts below the left instead of at the same height. The nav_bottom is below both of the areas which is what I want.
Can you help me move the right area up so it is even with the left and still have the nav_bottom below both.
Thank you for your help.
Marcus