CSS Problems with display: table

Question

I have decided that I have no idea what I am doing with my css.

I want to have two divs display side by side. The left div has content and should be big enough to support it. The right div should take up the rest of the horizontal space and be the same height as the left div.

A third div should then be beneath the two and span across the entire page.

I tried using a table, but the right hand cell wouldn't expand to the full height/width available. I've been trying to use divs with the displays set to table, table-row, table-cell.

For some reason the left div keeps expanding horizontally and my right div doesn't get any space. I have tried specifying the width of the left div, and it gets ignored.

The right div has dynamic content created by javascript, so it is empty when rendering occurs.

#main {
    display : table;
    width : 100%;
}

.row {
   display : table-row;
   width : 100%;
}

#row2 {
   display : table-row;
   background-color:purple;
}

#right {
    display : table-cell;
    overflow: hidden;
    height: 100%;
    background-color:blue;
}

#left {
    display : table-cell;
    background-color:red;
    width: 100px;
}

<body>
    <div id="main">
        <div class="row">
            <div id="left">
                 Some content
            </div>
            <div id="right"></div>
        </div>
        <div id="row2">
            Some stuff
        </div>
   </div>
</body>

Js Fiddle

score 2 · Accepted Answer · answered Oct 01 '13 at 19:14

Your "right" column isn't taking up any space because it has no content. Give it something and it will.

http://jsfiddle.net/6LFsL/4/

<div id="main">
    <div class="row">
        <div id="left">
             Some content
        </div>
        <div id="right">&nbsp;</div>
    </div>
    <div id="row2">
        Some stuff
    </div>
</div>

Also, using the table display properties doesn't mean you need to have table, table-row, and table-cell elements. Table and table-cell are just enough for this scenario:

.row {
    display : table;
    width : 100%;
}

#row2 {
   background-color:purple;
}

#right {
    display : table-cell;
    overflow: hidden;
    height: 100%;
    background-color:blue;
}

#left {
    display : table-cell;
    background-color:red;
    width: 100px;
}

So apparently my problems are stemming from the javascript library that draws the content for my right div. It's apparently too stupid to figure out the height of the div unless I explicitly set it. Thank you for solving my width problems. — mjr, Oct 01 '13 at 20:06

CSS Problems with display: table

1 Answers1