CSS div table styling

Question

I am trying to style a div table using css. Here is my sample working code:

HTML:

<div class="container">
    <div class="row">
        <div class="table-row">
            <div class="mycolumn" id="sidebar">
                Sidebar area
            </div>
            <div class="mycolumn" id="content">
                <p>content area</p>
                <p>some more content</p>
            </div>
        </div>
    </div>
</div>

CSS

#sidebar{
    width: 250px;
    background-color: #eaeff1;
}
.table-row {
    display: table-row;
}
.mycolumn {
    display: table-cell;
    padding: 15px;
}
#content {
    background-color:#00eff0;
  /* width:100%; */
}
div {
    outline: 1px solid #3a87ad;
}

http://jsfiddle.net/gbovzuqm/

How can I get content area div to cover up all the remaining space at the back? I have tried by apply width:100% to it, but it will squeeze the sidebar area.

How can I do it with CSS styling?

Answer 1

no need to use display:table-row use this

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

updated jsFiddle Code

Answer 2

Inorder to correct this you can do like this

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

Answer 3

If you have set display: table-cell , it only makes sense to also set display: table-row and display: table to its ancestors in order to simulate a table.

Click here to see updated fiddle

This question could be purely academic, but just some things to think about in case you're really doing this in a real life production system: why would you want to use <div> to simulate tables and cells when you could simply use <table> , <tr> and <td> ?

Also, from the words used inside the cell data, it sounds like you're using <div> as a disguise for tables in order to do page layout. PLEASE don't do this in real life. Tables for layout are hated for good reason; disguising them using other HTML tags is an even worse thing to do.