CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxopera
HelpNeeder
HelpNeeder

Reputation: 6490

3 column layout based of Table/Table-cell doesnt work on Chrome and Opera

I'm not sure why this wouldn't work on Chrome or Opera. I don't see anything that would be not compatible with other browser.

Any ideas?

jsFiddle: http://jsfiddle.net/3vugadj6/

        <style>
            #page_body_table {
                display: table;
                width: 100%;
                vertical-align: center;
            }

            #page_body_left {
                display: table-cell;
                max-width: 100%;
            } 

            #page_body_middle {
                display: table-cell;
                width: 700px;
                border: 1px solid black;
            }

            #page_body_right {
                display: table-cell;
                max-width: 100%;
            }

            @media screen and (max-width: 700px) {
                #page_body_left, #page_body_right {
                    display: none;
                }
            }
        </style>
        <div>
        <center id="page_body_table">
            <div id="page_body_left">

            </div>
            <div id="page_body_middle">
                this is content of page
            </div>
            <div id="page_body_right">

            </div>
        </center>
    </div>

Upvotes: 0

Views: 194

Answers (1)

Hristo Valkanov
Hristo Valkanov

Reputation: 1687

you have to add: table-layout: fixed; to #page_body_table and make it look like this:

#page_body_table {
    display: table;
    width: 100%;
    vertical-align: center;
    table-layout: fixed;
}

here's a fiddle.

Exaplanation can be found here.

Long story short: If the layout is auto, instead of fixed, the width is determined by the content of the cells, which in your case is none, so the middle cell is stretched. If it's fixed it distributes the remaining space to the empty cells.

Upvotes: 1

Related Questions