Div alignment

[dianagaby2002]

I have 3 DIVs:
1st-> left,
2nd-> right side of 1 but a part of it is under 1(upper-left corner),
3rd-> right side of 2, like a menu.

So 1st is the smallest and covers upper-left corner of 2nd.

I can't set the "menu"-like DIV(3rd DIV) on the left of the 1st and 2: like 1,2,3.

This is my code:

<div id="container" style="width:1200px">

	<div id="header" style="background-image: url(imagini/hd.jpg); 
    height:200px; width:1200px; text-align:center">

	<h1 style="margin-bottom:0">...</h1>
	</div>
	
		
	<div id="1st" style="background-color:#CC9966; width:400px; height:500px; z-index:1; float:left">


</div>


	<div id="2nd" style="background-color:#FFFFCC; width:900px; height:1000px; z-index:-1;">
	wqfwqfaf<br>
	ajnkm;sa<br>
	</div>

	
	<div id="menu(3rd)" style="background-color:#CCCC66; height:600px; width:200px">
	</div>
	

	</div>

Thank you in advance!

[Rabbit]

1) You shouldn't inline your styles unless you have to.

2) You need to float the middle div if you want the right div to be next to it.

3) The widths of your 3 divs added together is larger than your container.

4) Even if you make them equal, you need to account for paddings, margins, borders, etc.

[martin631775]

here is solution of your problem:

<div id="container" style="">
 
    <div id="header" style="background-image: url(imagini/hd.jpg); 
    height:200px; width:1200px; text-align:center">
 
    <h1 style="margin-bottom:0">...</h1>
    </div>
 
 
    <div id="1st" style="background-color:#CC9966; width:400px; height:500px; z-index:1;float:left;">
 
 
</div>
 
 
    <div id="2nd" style="background-color:#FFFFCC; width:900px; height:1000px; z-index:-1;position:absolute;">
    wqfwqfaf<br>
    ajnkm;sa<br>
    </div>
 
 
    <div id="menu(3rd)" style="background-color:#CCCC66; height:600px; width:200px;position:absolute;margin-left:900px;">
    </div>
 
 
    </div>

for more help<link removed>