A table web page layout using the display property in css

Question

So I've been using CSS table display property to get a table layout on my site. Now before you go into the using 'float' property or use the HTML table tag, I prefer the CSS table layout and find it better and my mind is made up. Here is the HTML code:

<div class="page_wrap">
    <div class="header">
        <div class="banner">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Topics</a></li>
                <li><a href="#">"Closet"</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <div class="directory"></div>
    </div>
    <div class="content">
        <div class="main_col">
            <div class="blog">
                <div class="blog_head">
                    <h3>What To Wear Today</h3>
                </div>
                <div class="blog_body">
                    <p></p>
                </div>
                <div class="blog_recent"></div>
            </div>
            <div class="news">
                <div class="news_recent"></div>
            </div>
        </div>
        <div class="sub_col">
            <div class="daily_verse">
                <h3>"What Word To Wear Today"</h3>
                <p></p>
            </div>
            <div class="bible_topic"></div>
        </div>
    </div>
    <div class="footer">
        <div class="container"></div>
    </div>
</div>

And here is the CSS:

.content
{
    display: table-column-group;
    margin-top: 25px;
}

.main_col
{
    display: table-column;
    background: red;
    width: 550px;
    padding: 20px 15px;
}

.sub_col
{
    display: table-cell;
    background: green;
    width: 350px;
    padding: 20px 15px;
}

.blog
{
    display: table-cell;
    background: black;
}

.blog h3
{
    padding: 20px 0px;
    width: 250px;
}

.news
{
    display: table-cell;
    background: gray;
}

.daily_verse
{
    display: table-cell;
}

.bible_topic
{
    display: table-cell;
}
</style>

The problem is when I use the table-column property in the CSS, then everything in the HTML tag under the main_col div disappears.

Can you clarify what you mean by "The things straight disappears"? — Matt Stauffer, Oct 23 '12 at 01:19
Sorry, I was a little frustrated but thanks for answering. I don't see anything in the div of the main_col html tag, when I use the table-display column — AymNaija, Oct 23 '12 at 01:21
Try this (possible duplicate): http://stackoverflow.com/questions/7617418/how-is-a-css-display-table-column-supposed-to-work — Matt Stauffer, Oct 23 '12 at 02:05

score 0 · Answer 1 · answered Nov 14 '12 at 18:07

Use this example as your structure and go from there. Your table is crazy disorganized and I don't think you are actually wanting table-columns. Or maybe an illustration of how you'd like it to look would help and we could provide code examples? (http://xahlee.info/js/css_table.html)

A table web page layout using the display property in css

1 Answers1