Question

I want to know, can I do this mark up use just display: table; and display: table-cell for columns:

For example 1 and 3 columns width is 15% of the screen and last one is 70%.

If I try to do it like this:
Page:

    #content #left-column
{
    display: table-cell;
    width: 15%;
}

#content #mainContent
{
    display: table-cell;
    padding-right: 22px;
    width: 70%;
}

#content #right-column
{
    display: table-cell; /* width: 300px;*/
    width: 15%;
}

I`ll get mark-up like this .

How cam I create correct markup?

——-Edited——————————-
I have to add this code to fix my problem.

content

{
display: table;
width: 100%;
}

Answer 1

Seems your code works.. I just added the parent element with display: table; and it’s fine.

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

#content div
{
    border: 1px dashed #000;
}


#content #left-column
{
    display: table-cell;
    width: 15%;
}

#content #mainContent
{
    display: table-cell;
    padding-right: 22px;
    width: 70%;
}

#content #right-column
{
    display: table-cell; /* width: 300px;*/
    width: 15%;
}

It’s possible you have a markup error, did you use something like this?

<div id="content">
    <div id="left-column">
        Left column
    </div>
    <div id="mainContent">
        Main Content
    </div>
    <div id="right-column">
        Right column
    </div>

</div>

http://jsfiddle.net/2dMfZ/1/