Div alignment not working properly - css

Question

css
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
position:absolute;
}
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
border:1px solid #E0DCD1;
clear:both;
}
Html
<div id="content2">
<div>content</div>
<div>content</div>
</div>
Result
div1 is showing inside div2
I need
div1 then
div2
Please help me.

Answer 1

why using position absolute,no need for clear property for last-child
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
/*position:absolute;*/
}
#content2 div:last-child
{
width:1024px;
height:200px;
/*position:absolute;*/
border:1px solid #E0DCD1;
/*clear:both;*/
}
div are cleared by default unless after using float property

Answer 2

remove position absolute from both child divs...

Answer 3

If you are using Position: absolute; specify the margin for both div's.
eg:
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
margin-top: xxx; /* specify the top margin */
border:1px solid #E0DCD1;
clear:both;
}

Answer 4

i think you are looking like this :- http://tinkerbin.com/3qRLgscO
Actually you made CSS bit of complicated for yourself.You can get your desired results through very simple CSS without using of positioning.
And if we are using float than we should use the clear for clearing the floated div's otherwise no need to use the clear property.
Here is the simple code of yours i have some simple changes in your CSS.....
HTML
<div id="content2">
<div>div1</div>
<div>div2</div>
</div>
CSS
#content2 {
background: none repeat scroll 0 0 red;
height: 200px;
width: 1024px;
}
#content2 div:first-child {
background: none repeat scroll 0 0 #E4ECF7;
height: 45px;
}
#content2 div:last-child {
background: none repeat scroll 0 0 yellow;
border: 1px solid #E0DCD1;
height: 45px;
}
I hope this will help you........

Answer 5

you can use the following properties in your div class.
float:left
clear:right;