CODEWITHSUNDEEP
htmlcss
likeforex.com
likeforex.com

Reputation: 117

how to position a div on top section of its parent div

Somewhere in a page, how to make div-a2 position above div-a1? Of course, I cannot make div-a2 above div-a1 in the layout below.

<div id=a>

<div id=a1> something here
</div>
<div id=a2> show this part first
</div>

</div>

still looking for better solution. thanks

Upvotes: 1

Views: 1157

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

You will need to give the elements absolute position css, and then position them appropriately depending on the content size of each like:

#a1,#a2{position:absolute;}
#a2{  top: 0; }
#a1{  top: 200px;}

OR, within the parent:

#a1,#a2{position:relative;}
#a2{  top: 0; }
#a1{  top: 200px;}

Or, a perhaps better alternate is to change the layout order (but I assume that is not possible for some reason not stated).

Here is an example: http://jsfiddle.net/MarkSchultheiss/CRCvU/

See this updated example where I used em instead of px for the position, gave the parent a border so you see its scope, and added stuff around the parent. http://jsfiddle.net/MarkSchultheiss/CRCvU/1/

Just in case you want to go that way, here is the jQuery code to do this:

var ah1 = $('#a1').height();
var ah2 = $('#a2').height();
var ah = $('#a').height();
var relpos = {float:"left",
    display: "inline-block",
    position: "relative",
    clear: "both"
};
$('#a').css({
    height: ah
});
$('#a1, #a2').css(relpos);
$('#a2').css('top', -ah1);
$('#a1').css('top', ah2);

Working scripted example here: http://jsfiddle.net/MarkSchultheiss/CRCvU/3/

Upvotes: 0

sandeep
sandeep

Reputation: 92803

You can achieve this with pure css. Write like this:

#a{
    display:-moz-box;
    display:box;
    display:-webkit-box;
    -moz-box-direction:reverse;
    box-direction: reverse;
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;  
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;     
}

' Check this http://jsfiddle.net/ASVtx/1/

Upvotes: 1

Related Questions