As a fellow beginner web designer are you sure you want that? What purpose is having all that empty space in between the two pillers on the sides instead of having the empty space between the bottom pillers and the footer?

Haha, it's just a diagram... Maybe I should show you guys the actual design.

http://www.airtimeproductions.co.za/sites/isochronous/index.html

The "pillars" divs should actually seem part of the footer, but I'm not sure how to pull this off in the CSS.

@TheDoc

Thanks. Looks like I've got my work cut out for me though. What do you suggest by way of another way of coding it?

Here's the site as it currently stands: http://www.isochronous.net/template.html

Currently, the header pillars work fine as they are, but aligning the bottom pillars are another story.

The problem with that is that the different nav buttons are of different lengths. I know it works great, like in the header of CSS-Tricks itself, but I'm committed to the current design, I'm afraid.

Any thoughts on how to pull off the footer and header layout without using the "pillars"?

Basically, because of the sprite menu and the rollover effects involved. I'd prefer to keep it that way.

Cheers guys... I wish I could put it together without breaking my brain, though!

Eeesh... Rudy, I follow you until about the middle of the first sentence! Sorry.

I'm getting quite far with the layout, but those pillars are still bugging the heck out of me:

http://www.isochronous.net/template.html

I've now wrapped #pillar-top-left and #pillar-bottom-left in #pillar-left, and the same for #pillar-right, floated the two pillar wrappers left and right and I'm trying to do it with absolute positioning.

Actually, I remember now that when I was still working as a web designer at an agency, I was sending the developers layouts like this and they'd be pulling their hair out by the end of the day and the design just never got implemented properly. I'm now getting a taste of my own medicine, it seems. Should I be worried?

This is really getting frustrating now. I'm setting #pillar-left and #pillar-right to "position:relative" and the bottom pillar bits to "position:absolute; bottom:0", and by all accounts this SHOULD work, but instead they're displayed halfway down the page.

The reason for this is that the pillars both have a height of "height:100%", meaning they take their height from the #mid div... which is exactly 0. Uh... what?

As I understand it, the #mid div should take the height of the content inside it... i.e., the content of #content. But it doesn't. It's just "0".

Could really use some help from some wise CSS ninjas. :(

@rudynorman:

Ah, I see what you mean now. Unfortunately, it's not going to suit my purposes... that space isn't black in the design; it's got a tiling graphic running down it. Thanks, though.

i always have trouble with height 100% i don't really trust it so don't often use it. If i hover over your #mid element in firebug it's much smaller then it should be considering the #content extends right down to the bottom of the page. And because the pillars are taking their height from the #mid section i guess this is why there not going to the bottom.

I think this is happening because of the three child elements inside the #mid element are all floated, have you heard of the clearfix (http://css-tricks.com/snippets/css/clear-fix/) method? applying it to your #mid element might just sort it out.

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.

How about this -

the grouping isn't the greatest but - move the pillar-left-bottom and pillar-right-bottom directly into the #mid div. Give #mid position:relative; and then use absolute positioning on the pillar-bottom divs and set their bottom to 0

The pillar wrapper divs do not have the full height of #mid, but if you look at the size of mid, it is the perfect size for what you want to do, the pillars will always be at the bottom of the post list

Also, for the comments section:

I'd like to connect a little arrow to the comment pointing to the poster's avatar to make it a speech bubble (my design: http://www.airtimeproductions.co.za/sites/isochronous/index.html ). What is the best way to go about this?

for the speech bubbles i would use a similar method to the pillar tops and bottoms. position:relative on each of the speech bubbles ( .comment .text ) and then place a div inside them with the arrow as a background image and with absolute positiong to get it in the correct place.

I've assigned a class "spritenav" to the ul elements in the sprite navs and have added this CSS:

.spritenav { padding:0; }
.spritenav li a {display: block;}

Hover, it doesn't seem to have worked. At least for the header and footer navs - the social media links work.

The text-indent trick is quite widely-used in sprite navs, as far as I know. The advantage is that it doesn't hide the text (the way "display:none" would do), so it's in a sense more SEO-friendly... although it does also try to "fool" the search engines in a way. I'm not sure whether it's detrimental either way.

Thanks, that did the trick... I'll have to reposition them, but the rollovers and the links work. Tomorrow, though. *yawn*

Again, thanks for all your help!