A table web page layout using the display property in css - 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>Home</li>
<li>Topics</li>
<li>"Closet"</li>
<li>Music</li>
<li>Resources</li>
<li>About</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.

Answer 1

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)