PDA

View Full Version : Box model design problems - need a word of advice


Doctor_Varney
06-15-2008, 12:55 PM
Hi,

I can't really explain my problem very well, but to cut a long story short - When I make a box model with a left column for navigation, a right one for content; and apply padding to the inside of the content column, to create a global left gutter for all my content text and headings, it blows the carefully built box model to pieces. Bits up here, parts lying down there... It's as if padding is as a hand-grenade is to a cream cake. There has to be a proper method of doing this and I would like if possible to see some code for the basic structure which holds together properly. Can anyone help?

The important thing to consider s that my container div (#wrapper) has been designed as an 850px wide floating box, with a {0px auto;} margin set up, to centre it on the page. Therefore, I don't have any lower/right overspill to play with, within the design. I need everything to sit inside this neat frame, but the padding rule blows it apart, meaning I have to assign margins to each and every one of the elements.

There's a #masthead to the top and a #footer at the bottom, which are fixed.

Would you advise me not to use padding at all, anywhere in this design? I've never seen under the hood of a letterbox design before, so having to guess how it's done.

Many thanks,

Doctor_V

effpeetee
06-15-2008, 01:10 PM
We really need to see your code at least or a url to a site if there is one.

Frank

Doctor_Varney
06-17-2008, 02:34 AM
Thank you for those quality links, Frank. Some I have bookmarked, for future ref.

I experimented with two versions of my site - one which uses lots of individual divs for styling up the content and the other (which I'm having the trouble with) in which I've attempted to set just a few 'macro' style rules to work on a global scale.

For now I have decided to continue on with the original (which at least works) and persue those links you provided, for future projects; especially where the three column layout is described in full.

Kind regards,

Doctor V