Dreamweaver - CSS Page Layout: Columns

Author

CSS Page Layout: Columns

KayDeW

2005-09-15, 4:16 am

I just starting to use CSS page layout to avoid the zillions of nested tables.

What I try to do is to contain 2 CSS defines columns within a fixed width
table of 775px that is centered on the screen.
I have a couple of questions:

I define the 2 divs (for the the 2 columns) having each a 50% width

1) If I add a 1px rightside border to the left column, it seems that they do
not fit anymore in the 775px width table. How come? I would think that the 50%
overrules the border and adjust everything so that the column's 50% width would
include the border.
2) If I add padding (that is inside the column): i have the same problem. How
come?

Hope someone can help me with this problem.
By the way, I use DW8.

Thierry | www.TJKDesign.com

2005-09-15, 4:16 am

KayDeW wrote:
> I just starting to use CSS page layout to avoid the zillions of
> nested tables.
>
> What I try to do is to contain 2 CSS defines columns within a fixed
> width table of 775px that is centered on the screen.
> I have a couple of questions:
>
> I define the 2 divs (for the the 2 columns) having each a 50% width
>
> 1) If I add a 1px rightside border to the left column, it seems that
> they do not fit anymore in the 775px width table. How come? I would
> think that the 50% overrules the border and adjust everything so that
> the column's 50% width would include the border.
> 2) If I add padding (that is inside the column): i have the same
> problem. How come?

This is perfectly normal. Browsers add border and padding to the
width/height of the box.
Note that IE5 Win does exactly the opposite (broken box model); it subtracts
border and padding values from the box itself.
Try to avoid mixing size with border/padding or take into consideration the
way IE5 deals with these values...

HTH,
--
Thierry | http://www.TJKDesign.com | CSS-P Templates + Articles:
CSS Popups, CSS 3 Column Layout, CSS Tabs, CSS Dropdown Menu,
TIP Method, Sliced Images, Clean Popup Windows, Easy Maintenance.....

Tim G

2005-09-15, 4:16 am

"KayDeW" <webforumsuser@macromedia.com> wrote in message
news:dgapm2$9ps$1@forums.macromedia.com...
>I just starting to use CSS page layout to avoid the zillions of nested
>tables.
>
> What I try to do is to contain 2 CSS defines columns within a fixed width
> table of 775px that is centered on the screen.
> I have a couple of questions:
>
> I define the 2 divs (for the the 2 columns) having each a 50% width
>
> 1) If I add a 1px rightside border to the left column, it seems that they
> do
> not fit anymore in the 775px width table. How come? I would think that the
> 50%
> overrules the border and adjust everything so that the column's 50% width
> would
> include the border.
> 2) If I add padding (that is inside the column): i have the same problem.
> How
> come?

As Thierry said, this is proper behaviour. Learn the basics of the box
model:

http://www.pactumgroup.com/tutorials/boxmodel.php

tim
--
Tim Gallant
Pactum Web Services: http://www.pactumgroup.com
Tutorials: http://www.pactumgroup.com/tutorials/