To get you started on the first part of your problem, try removing the absolute positioning for the 3 containers in the #content. Then make sure all 3 containers float left and reduce the width of the #feature to 200px.

The code for the 3 containers should look something like this:


div#content_main { width:470px; float:left;}

div#content_sub { width: 180px; float:left; }

div#feature { width: 200px; float: left; border-left: #CCC thick; border-left:#EEE solid 1pt;}


You'll then need to adjust your margins and padding to get things to align properly.

try this
/*for yoru outer container or wraper*/
#content_main{margin:0px auto; width:860px;}
/*
now drop threediv in content_main div
*/
<div id="content_main">
<div style="float:left; width:170px;"></div>
<div style="float:right; width:170px;"></div>
<div style="margin:0px 169px 0px 169px;"></div>
<div style="clear:both"></div
</div>
<div id="footer"></div>
/* that's it*/
now add content to these divs your div will grow with contents

@shauncrittenden

thanks it solves the problem too but in dreamweaver I can no longer select my content text (not code). As if the content_main div is on top of the text.


@yasirhaleem

I couldn't figure out why we have to create another 3 div with attributes like those..
the 170pxs and that margin.
That will make my content_main, content_sub and feature goes where?
Can you explain it more?

I also have tried another work-around.. http://www.88keys.ca/2008/001-2.html
css on :http://www.88keys.ca/2008/001-2.css

I created another div inside the <content> div called content_all.
Content_all div have all the three div of content_main, content_sub and feature.
like so:
<content>
<content _all>
<content_main> </content_main>
<content_sub> </content_sub>
<feature> </feature>
</content_all>
<siteinfo> </siteinfo>
</content>

Just to get the siteinfo div to be directly under the three content div. And the content div background #FFF not to obstructing the siteinfo background image, as you can see previous.

This can tackle the problems but another problems just caught my eye. The main Nav (about, register et al) are not render well on Macs Platform (FFx and Safari) also on Safari for PC.
I mean the space between <li>. IE 7 and FFx render well.

Have tried all element selector and attributes also units to get the spaces right cross-browser. No Good.
Got it right on Safari, not in IE and FFx.
Is there any workaround on this?
I used the vertical spacer embedded on a background image (green).