Fluid CSS layout and Borders

Question

In designing a fluid layout, how do you use borders without ruining the layout.

More specifically, I have a HTML widget which consists of five divs. I would like the fi

Answer 1

Only put width: 100% on the outermost div, and don't put a border on it. If you do this, then the inner boxes will fill the space (assuming you haven't floated them or anything) since they're block elements, and you won't have to worry about borders adding to the total size.

If you really need the appearance of five solid single pixel nested borders, you can do something like this (with properly semantic names, hopefully):

    

        

        etc.
        
    

As you can see, you can fake the second border using padding and background colors on the second div (might even cut down on the total number of divs by doing this; just remember you can't pad the outmost div without screwing up your width).