[css-d] Need help on css positioning

[Dinh]

hi everybody,

I have a simple XHTML file which define 4 division (div) in order of: banner
> container > sidebar > footer and use CSS to make a layout like this:
http://img246.imageshack.us/my.php?image=layoutsidebarallheight1wx.png

Hereunder is the XHTML file:

<div id="banner">
<p>Xin chào bạn nhé: Banner</p>
</div>

<div id="container">
<p>Đây là vùng nội dung chính chứa các bài viết </p>
<p>This the <strong>main content</strong> part</p>
<p>This the main content part</p>
<p>This the main content part</p>
</div>

<div id="sidebar">

<ul>
<li>Sidebar menu item 1</li>
<li>Sidebar này sẽ để dọc </li>
<li>theo toàn bộ chiều cao</li>
<li>S 4</li>
</ul>
</div>

<div id="footer">
<p>This is the footer</p>
</div>


I have a css file attached to this XHTML file.

#banner {
width:75%;
background-color: #6666FF;
float:left;
}
#container {
width:75%;
background-color: #FFCC33;
float:left;
}
#sidebar {
width:25%;
background-color: #FFFF99;
float:right;
}
#footer {
background-color: #6699FF;
clear:both;
}


As you can see I intend to set the width of the container and the banner
into 75% and push them to the left. I intend to reserve the space available
in the right after that for the sidebar whose width is set at 25% and
positioned to the right. But unfortunately, the sidebar has floated to the
right but it is always positioned under the banner.

http://img332.imageshack.us/img332/1461/4div0gd.png


I dont know the reason why although I have tried many solutions. The only
solution that has worked until now is that I need to reorder the XHTML div
code: banner > sidebar > container > footer.

Could I solve this problem in CSS file without having any touch on XHTML
code?

Thanks in advance

Dinh

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/