Div CSS表格无法正确呈现

Question

I have created a DIV + CSS style table like layout. However, the third column keeps on getting display below the first 2 columns. Even if I use width as 33% (ie total under 100%) its the case.

HTML tags are as follows:

        <div id="container">
            <div id="column1">
                Some Content for the first column.
            </div>
            <div id="column2">
                Some Content for the second column.
            </div>
            <div id="column3">
                Some Content for the third column.
            </div>
        </div>

CSS sheet contains:

    #column1 {
        float: left;
        width: 33%;
        border: solid;
    }

    #column2 {
        float: left;
        width: 34%;
        border: solid;
    }

    #column3 {
        float: left;
        width: 33%;
        border: solid;
    }

How to make sure they will render properly on all kind of resolutions?

Answer 1

The default calculation for width does not take the border width into account. By adding the following CSS you can have your width calculation including the borders.

    .boxStyle {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

Modify your HTML to refer to this newly created class

        <div id="container">
            <div id="column1" class="boxStyle">
                Some Content for the first column.
            </div>
            <div id="column2" class="boxStyle">
                Some Content for the second column.
            </div>
            <div id="column3" class="boxStyle">
                Some Content for the third column.
            </div>
        </div>

Answer 2

I think it is happening beecause your div widths sum upto 100 %, which is excluding the small but still existant widths of the borders. You can reduce the width further by 1% to accomodate for the border width.

Check this

Answer 3

You can also use a display type of inline-block, this gets around some of the quirks of floated items such as having to clear them.

One thing to note is you need to remove any white-space between the divs. You can also change the vertical-alignment for more control.

<div>....</div><div>
....
</div><div>
....
</div>

.

#container{
width:100%;
}
#column1,#column2,#column3{
display: inline-block;
vertical-align: top;
width:33.3%;
}

A link with more is here: http://www.vanseodesign.com/css/inline-blocks/