CODEWITHSUNDEEP
htmlcss
Ivan Korytin
Ivan Korytin

Reputation: 1842

Third columns mark-up with CSS3 without float

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

enter image description here

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 result.

How cam I create correct markup?

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

content

{ display: table; width: 100%; }

Upvotes: 2

Views: 306

Answers (1)

Kyle
Kyle

Reputation: 67204

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/

Upvotes: 3

Related Questions