Menu
I'm always weak when it comes to positioning divs, but this situation is slightly difficult to find a solution to online. I'm trying to position boxes like so:
_ ___ _
|_|| ||_|
_ | |
|_||___|
Is there a way to avoid defining each one's pixel positions specifically and make them slot into the three columns I've got?
690
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
The position CSS property sets how an element is positioned in a document. The top , right , bottom , and left properties determine the final location of positioned elements.
First set position of the parent DIV to relative (specifying the offset, i.e. left , top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want. It's simple and should do the trick well.
Define three containers for each column, and float them to the left:
<div style="float:left;width:Xpx"></div>
<div style="float:left;width:Ypx"></div>
<div style="float:left;width:Zpx"></div>
Now you can put all your containers in appropriate places in this columns.
59
take a look at this fiddle: http://jsfiddle.net/rREAh/ is this what you are looking for?
If you need a perfect layout, take a look at the yahoo layout manager: http://developer.yahoo.com/yui/layout/
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
