Re: [Solved] Noobie Layout Question

[ralc]

ah i see at least your #mid element now registers its height to the bottom of the page. But the 100% height on pillars still is’nt working.

(ive made a demo of the explanation below: http://ralcus.com/band/ )

Ok how about a change in tactics, instead of having the two pillars either side you could lose them, just make the #content div take the full width, give it a border on the left and right of 1 pixel of that brown for the outer border. Then making another div inside the #content div and give that another 1 px brown left and right border for the inner part of the colum. pad out #content by 48pixels on the left and right and make sure your inner div has the 20 pixel padding for left and right.

At this point you would have the borders running the full width of the page, now you just need to put the tops and bottoms of the pillars in place. Instead of having two pillar divs with the tops and bottoms inside how about taking the tops and bottoms out and placing them on their own leaving you with four divs ( pillar-left-top, pillar-right-top, pillar-right-bottom, pillar-left-bottom ) inside the #mid element.

Now what you could do is position them by taking them out of the flow of the document so they don’t interfer with the #content div. To do this you can position each one absolutely. Positiong something absolutely will by default position them relative to the browser view port. But the extremely handy thing is, if a parent element is positioned relative any child elements positioned absolutely will now be relative to them rather then the browser view port. So putting position:relative on the #mid div allows you to position each of the four pillar divs in the top-left, top-right, bottom-left and bottom-right position of the #mid div without disturbing the #content div.