Need help with lining up two boxes one on top of the other...

Hi Ive been trying to center these two boxes using div ids they need to be under each other with a space in between and centered basically I centred one using auto margin and then tried to do the same with the following div although it centres with equal margins left and right it positions itself partly on top of the first box.
Here is the css code

#post1 {


width : 300px;
height : 600px;
margin:auto;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : red;
border:1px solid white;


}


#post2 {


width : 299px;
height : 600px;
margin:auto;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : red;
border:1px solid white;


}

am just experimenting with the layout for the time being ...I would like to be able to do this without using absolute and relative positions,the wrapper of the site is the body itself and I have no separate wrapper id
its just
body {
background-color:black;
}

 

Use This, just change z-index value to change position of dive and i have changed the height and color of 1 div to distinguish them, and put both divs in a container

.container
{
	width:305px;
	margin:0 auto;
}

#post1 {


width : 300px;
height : 600px;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : red;
border:1px solid white;
position:absolute;
z-index:1;


}


#post2 {


width : 299px;
height : 500px;

padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : blue;
border:1px solid white;
position:absolute;
z-index:2;
}

Code (markup):

 

Hi thanks mate but it don't work its the same as before I have attached a screenshot and the complete codes View attachment 94784

its centered but there needs to be a gap in between the two divs so they're separated as you can see one is overlapping the other..

the css



body {
background-color : black;
}


.container{


width:305px;
margin:0 auto;
}








h1 {


width : 700px;
height : 100px;
background-image : url(londonb.png);
margin:auto;
text-indent : -999em;
}


#highnav {


display:block;
margin:auto;




}


#highnav ul {
margin : 0;
padding : 0;
line-height:30px;


}


#highnav li {
margin : 0;
padding : 0;
list-style : none;
float : left;
position : relative;
background:grey;
}


#highnav ul li a {
text-align :center;
font-family :"Comic San MS.cursive";
font-size :75%;
text-decoration:none;
height :40px;
width :150px;
display:block;
color :white;
border:1px solid white;


}


#highnav ul ul {


position:absolute;
visibility:hidden;


}


#highnav ul li:hover ul {


visibility:visible;

}


#highnav li:hover {
background:blue;
}


#highnav ul li:hover ul li a:hover {


background:blue;
color:black;
}


#highnav a:hover {


color:black:
}




#rightnav {
float : right;
width : 200px;
height : 800px;
background-color : #ff9900;
}




.clearFloat{
clear:both;
margin:0px;
padding:0px;


}






#post1 {




width : 300px;
height : 600px;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : red;
border:1px solid white;
position:absolute;
z-index:1;




}




#post2 {




width : 299px;
height : 500px;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : blue;
border:1px solid white;
position:absolute;
z-index:2;
}



.floatleft{
float :left;
margin:1px,10px,10px,10px;
}


#footer {
clear : both;
background-color : grey;
}

and the html

 

Ohk.. then use this css

.container{


width:700px;
margin:0 auto;
}


#post1 {


width : 300px;
height : 600px;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : red;
border:1px solid white;
float:left;
margin-right:20px;
}


#post2 {


width : 300px;
height : 600px;
padding : 3px;
border-radius: 15px;
font-family : "Times New Roman";
background-color : blue;
border:1px solid white;
float:left;
}

Code (markup):

 

Still not working come on guys someone must know on this site how to do this? all thats happened is that the contents gone over to the left.

 

can you please upload the entire html file within a zip folder, i will fix it for you, you must me missing something in HTML too i think

 

Hi thanks I will send you the html...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>chess tactics page1</title>
<link rel="stylesheet" type="text/css" href="flow.css" >
<h2>
</head>






<div id="header">
<h1>chess beginner tactics</h1>
</div>
<div id = "highnav">
<ul>
<li><a href="#"> Beginners Chess</a>
<ul>

<li><a href="#"> How to play Chess</a></li>
<li><a href="#"> Basic tactics </a></li>
<li><a href="#"> Trick & tips</a></li>





</ul>
</li>
</ul>


<ul>
<li><a href="#"> Chess Tactics</a>
<ul>

<li><a href="#"> Beginners level</a></li>
<li><a href="#"> Intermediate</a></li>
<li><a href="#"> Advanced</a></li>





</ul>
</li>
</ul>




<ul>
<li><a href="#"> Chess Openings</a>
<ul>

<li><a href="#"> Iink here</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>




</ul>
</li>
</ul>


<ul>
<li><a href="#"> Chess Strategies</a>
<ul>

<li><a href="#"> Iink here</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>




</ul>
</li>
</ul>




<ul>
<li><a href="#"> Book Reviews</a>
<ul>

<li><a href="#"> Iink here</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>




</ul>
</li>
</ul>




<ul>
<li><a href="#"> Produce</a>
<ul>

<li><a href="#"> Iink here</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>
<li><a href="#"> Islington</a></li>




</ul>
</li>
</ul>






<br class ="clearFloat"/>
<div/>


<div class = "container">




<div id = "post1">


<img src="chessboard.jpg"width="200" height="150">


<img src="chess.jpg"width="200" height="150">


<div/>




<div id = "post2">


<img src="chessboard.jpg"width="200" height="150">


<img src="chess.jpg"width="200" height="150">


<div/>
<div/>








<body/>
<html/>

 

Lol. i have fixed the file.. remember closing tag for div is "</div>" NOT "<div/>"

 

Hi thanks but I fixed it anyway here is how it looks..
this is what i meant by two boxes its on a page with a black background and a header and menu at the top.

.wrapper {

width:750px;
margin:auto;
border:1px solid white;


}
#post1 {




width : 750px;
height : 400px;
border-radius: 5px;
font-family : "Times New Roman";
background-color : white;
border:1px solid blue;
position:absolute;
z-index:0;


}




#post2 {




width : 750px;
height : 400px;
border-radius: 5px;
background-color : white;
position:absolute;
margin-top:420px;
border:1px solid blue;
}

this is the css i used as you can see both absolute to stop the images making the post divs bigger margin top on the second div gets the gap in the middle that separates the two divs...
and z index stops the first div #post1 from blocking the dropdown menu just gave the dropdown menu a higher z index....hopefully they will be no more problems first for pointing out about the </div> which made it work as well..