Comments on: CSS Absolute and Relative positioning – explained http://www.webopius.com/content/144/css-absolute-and-relative-positioning-explained Web Design & Development, SEO and Project Management Thu, 15 Dec 2011 08:22:31 +0000 hourly 1 http://wordpress.org/?v=3.0.1 By: Webopius http://www.webopius.com/content/144/css-absolute-and-relative-positioning-explained/comment-page-1#comment-545 Webopius Fri, 20 Mar 2009 09:51:42 +0000 http://www.webopius.com/content/?p=144#comment-545 Hi Dan, My head was also giving pain when I started using relative/absolute positions! Yes, if you want to position the boxes using absolute positioning, that's exactly what you do. Remember to set the parent box position to be 'relative' to make it the nearest positioned parent element. Here's an example of what you describe (If you view the source, you'll see I put borders around the boxes so the widths are allowing for this): <style type="text/css"> #parent { border:solid 1px; width: 162px; height: 54px; position: relative } #box1 { border: solid 2px; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px } #box2 { border: solid 2px; width: 50px; height: 50px; position: absolute; top: 0px; left: 54px } #box3 { border: solid 2px; width: 50px; height: 50px; position: absolute; top: 0px; left: 108px } </style> <div id="parent"> <div id="box1">box1 content</div> <div id="box2">box2 content</div> <div id="box3">box3 content</div> </div> Hi Dan,

My head was also giving pain when I started using relative/absolute positions!

Yes, if you want to position the boxes using absolute positioning, that’s exactly what you do. Remember to set the parent box position to be ‘relative’ to make it the nearest positioned parent element.

Here’s an example of what you describe (If you view the source, you’ll see I put borders around the boxes so the widths are allowing for this):

box1 content
box2 content
box3 content
]]> By: Dan http://www.webopius.com/content/144/css-absolute-and-relative-positioning-explained/comment-page-1#comment-544 Dan Fri, 20 Mar 2009 09:30:59 +0000 http://www.webopius.com/content/?p=144#comment-544 Ouch. My head hurts. What I don't understand is how would three child elements line up if they were positioning in a box? I understand one child element. So if I have parent box with b1,b2,b3 inside it: If b1 is 50px x 50px do I have to then give b2 a position left:50px for it to be on the right of it? Ouch. My head hurts. What I don’t understand is how would three child elements line up if they were positioning in a box? I understand one child element.

So if I have parent box with b1,b2,b3 inside it:

If b1 is 50px x 50px do I have to then give b2 a position left:50px for it to be on the right of it?

]]>