No replies
MeTaL_oRgY
MeTaL_oRgY's picture
Offline
Regular
InGo'S RaNcH
Last seen: 13 years 17 weeks ago
InGo'S RaNcH
Joined: 2006-01-03
Posts: 28
Points: 0

Hello all, new here (might be around here for a while).

While I'm not an expert at CSS, I managed to create a fairly decent website with alternate stylesheets. I want to create another layout with it, but I have a small problem which I do not know how to solve. Let me try to explain.

<div id="main"> 
<div id="container1"> 
<div id="menu1"></div> 
<div id="menu2"></div> 
<div id="menu3"></div> 
</div> 
<div id="container2"> 
<div id="menu4"></div> 
<div id="menu5"></div> 
<div id="menu6"></div> 
</div> 
</div>


That would be the HTML. Now on to the css:

#main 
{ 
width: 750px; 
} 
 
#container1
{ 
position: absolute; 
float: left; 
left: 0; 
width: 120px; 
} 
 
#container2 
{ 
position: absolute; 
float: right; 
right: 0; 
width: 120px; 
}


All the small menu divs are just 120px wide. Everything goes fine. I have 3 columns, one wich I did not post here, which would be the container one. So container 1 would be the left column, and container 2 the right one. excelent. But now, a problem appears. I need to position the div named "menu2" ABOVE "menu1" without changing anything on the html file. Is this possible? I've tried with some absolute position on it, but it does some crazy things with the container divs....

P.S. I have some divs within the "menu" divs, I call them "menspace", I use them to give some space between menus. I thought of using clear: both; but perhaps I did something wrong... I just can't figure it out.