View Full Version : Please Approve My Design & Methods?

07-10-2011, 07:45 PM
I've been busy...

After having had a lot of trouble with CSS positioning and manipulating the box model, I think I have finally cracked it...

Please look here: here (http://www.tengunade.pwp.blueyonder.co.uk/adedaniel/)

I would love it if some of you experts here could have a quick glance and tell me if I've done this right? No tables, no frames and no messy hacks... just some floating and careful relative positioning.

(Yes, I have stolen layout ideas and some images from The CSS Zen Garden, with the intention of creating my own background graphics, once I've got the layout right).

Many thanks


07-10-2011, 08:05 PM
looks pretty good. some of the widths are off though.

I wouldn't say the script is correct, but it is a great leap forward.
Definetly not many unnecessary divs

overall looks great

07-10-2011, 09:49 PM
Thanks, mate. Input appreciated. What do you mean by 'widths are off'?

I agree, it's a huge step forward for me and it has renewed my confidence in this area.

07-10-2011, 09:54 PM

Inspect element will take you far. :)

07-11-2011, 12:20 AM
Is there something wrong with setting the #masthead width to 100%?

I can use Firebug for inspecting. Just have to download it again...

Oh, okay, I see what you mean. Maybe I should set it back to the width I started with. Thanks. :thumbsup:

Are those text images (skeletons) coming up stretched in your browser?

07-11-2011, 12:24 AM
I don't actually see the issue. It looks like that because the OP has used relative positioning (slightly unorthodox but valid nevertheless) to effect movement to the left. However, it's worth noting that divs are block-level, and thus inherently take up as much horizontal space as possible.

07-11-2011, 12:45 AM
I've just tried to correct the widths...

I can give those elements their true widths only if I float them left but not the footer. The #footer is already cleared and if floated, destroys the layout.

Hi Jordan. I'm not sure why you would consider relative positioning unorthodox...? I have tried using just floats and margins and this was the only way I could muster, to get the parents (#columnwrap and #wrapper) to scale vertically when I add content to their child divisions.

I'm glad this has worked, though while I have obviously used floats correctly, this exercise has left me understanding even less, the whole concept of 'floating'. It's one of the weirdest things I've ever come across.

Thanks for the feedback - it's very valuable to me!