CODEWITHSUNDEEP
javascripthtmlcss
Hanumendra
Hanumendra

Reputation: 319

making divs with auto margins in parent div with variable height

I have this code

<div style="position: relative;">
    /***main***/

    <div style="top:0">
        /*****Content1****/
    </div>

    <div>
        /*****Content2****/
    </div>

    <div>
        /*****Content2****/
    </div>

    <div style="bottom:0">
        /*****Content4****/
    </div>

</div>

I want content1 always at top and content4 always at bottom, also want content2 and content3 adjust top and bottom margin equally so that it look even, I am unable to do this, as parent div is of variable height and all other divs are of fixed height.

I think this will help you to understand what I want http://www.spoiledagent.com/ads/Help.jpg

Please help,

Upvotes: 0

Views: 133

Answers (1)

user1633525
user1633525

Reputation:

You can try this:

http://jsfiddle.net/Q4XaQ/

<div id="main">
    <div id="content1">/*****Content1****/</div>
    <div id="content2">/*****Content2****/</div>
    <div id="content3">/*****Content3****/</div>
    <div id="bottom">/*****Content4****/</div>
</div>

#main{
    margin: 0 auto;
    width: 960px;
    background: red;
}

#content1{
    height: 80px;
    background: gray;
}

#content2{
    width:480px;
    height: 300px;
    float: left;
    background: yellow;
}

#content3{
    width:480px;
    height: 300px;
    float: right;
    background: brown;
}

#bottom{
    height: 50px;
    clear:both;
    background: blue;;
}

Upvotes: 0

Related Questions