Layout help

[bp]

Apologies for the cross-post.


I'm tinkering with the layout of my site, http://www.polliweb.com/ so that I
have equal length columns. This part of things seems to be working okay. But
now that I've put text into my main column, it cuts across the side columns.
Can someone please help me with the code to keep the text from the middle
column actually within the bounds of the middle column?

I am also trying to get rid of the gap in between the header bar and the
middle three columns which contain the NavColumn, Sample text and Side
Column.

The page is located at:
http://www.polliweb.com/test/new-layout.html

And the CSS is at:
http://www.polliweb.com/test/new-layout.css

Thanks for looking.

 

[Steve Pugh]

Apologies for the cross-post.

You haven't cross posted. You may have multi-posted which is worse.

http://www.polliweb.com/test/new-layout.html

Can someone please help me with the code to keep the text from the middle
column actually within the bounds of the middle column?

For the moment let's ignore all the box model hacks and IE5 specific
values and just look at what happens in the standards compliant
rendering.

The left hand column has a width of 150px and 5px of padding. So 160px
total width to edge of background colour.

The right hand column has a width of 185px and 5px padding. So 195px
total width to edge of background colour.

These are floated left and right. The centre column then has left and
right margins of 160px. So It will just clear the left column but will
overlap the right column by 35px.

Change either the width of the right column or the right margin of the
centre column.

I am also trying to get rid of the gap in between the header bar and the
middle three columns which contain the NavColumn, Sample text and Side
Column.

div#header {
....
margin:0px 0px 10px 0px;

If you don't want a space don't specify a bottom margin on the header.

Steve

 

[buzzarant]

For the moment let's ignore all the box model hacks and IE5 specific
values and just look at what happens in the standards compliant
rendering.

Thanks for your suggestions re the code. Are box model hacks a bad
thing?

Brian

 

[Steve Pugh]

Thanks for your suggestions re the code. Are box model hacks a bad
thing?

No, they can be very helpful in some circumstances but it makes
debugging easier if you first create a version that works in the good
browsers and then put in the hacks to support the bad browsers.

In your case you were giving the same value for the width of the right
hand column to both IE5 and good browsers (so why bother with the
hack?), this was probably an oversight on your part but was the cause
of your problem.

Steve