[WSG] Need help on css positioning

[Dinh]

hi everybody,

I have a simple XHTML file which define 4 divison (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


--
Who am I?