Major problems with a very simple positioning!

Trying to create a "micro" template for blog posts. Last DIV won't position

[siddhu]

OK, so I've been through my two books on CSS from back to front, front to back, and looked at innumerable sites.....but for some reason I can't get one little bit of code to work!

The page layout is a simple: 2 column fixed width layout with a header and footer. This works fine!

What I'm trying to do is create a template for the posts on my site, but when I get to this level, it falls apart.

Here is the structure of my .html document (I've removed the footer and header and the secondary content div as they are not needed.

My doc type is: XHTML 1.0 Strict

1) div#content is the master container.

2) div#content_main forms the left column.

3) div#content_secondary forms the right column (removed).

OK so far so good.

Now when I get to creating the div structure for the posts on my site, I just can't get it to work.

Here is the structure:

1) div.new_blog is the "new post "container (the parent is div#content_main).

2) div.post_info is the "post info" container.

3) div.image_left is the "image" container.

4) div.text_right is the "text" container. This is the problem. I'm trying to get this to be on the right side with the same vertical alignment as the #*$! div.

What am I doing wrong?

I'm sure the answer is staring me in the face but I just can't see it.

Here's my CSS code
-----------------

html { text-align : center; }

body {
position : relative;
width : 1000px;
margin : 0 auto;
border: solid #00FFFF;
border-width: 1px

}

div#content {
position : relative;
width : 100%;
height : 500px;
}

div#content_main {

left : 0;
width : 70%;
padding : 1em 0;
border: solid #00FF00;
border-style: solid;
border-width: 1px
}

div.new_blog {
left : 0;
width : 100%;
padding : 1em 0;
background-color: yellow;

}

div.post_info {
left : 0;
width : 100%;
padding : 1em 0;
background-color: blue;
}

div.image_left {
left : 0%;
width : 50%;
padding : 1em 0;
background-color: red;
}

div.text_right {
left : 50%;
width : 40%;
padding : 1em 0;
background-color: green;
}

----------------- HTML-----------------

<div id="content">

content div

<div id="content_main">
content_main

<div class="new_blog">
new_blog

<div class="post_info">post_info</div>

<div class="image_left">image_left</div>

<div class="text_right">text_right</div>

</div>
</div>
</div>

[swa66]

How about using faux-colums by applying margins on your regular content to keep it out of the second "column", and then floating your test that should be aligned with it to the second column ?

Just an idea ...