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