Dinh wrote:
#sidebar { width:100%; background-color: #FFFF99; /* float:left; */ }
#sidebar li { margin-left:20px; }
It looks nice on Firefox:
http://img354.imageshack.us/my.php?image=4divfinal5ku.png but not in
IE6: http://img252.imageshack.us/my.php?image=4divfinalie64rv.png
The problem with this is that the 'width:100%;' on #sidebar will force
it down in IE/win (see: 'hasLayout'[1]}. Deleting 'width' will solve
that, but IE/win is buggy so it won't flow #sidebar up past 2 floats
anyway. The result: #sidebar won't go high enough.
Go back to your original, as it is working in accordance with
W3C-standards for floats.
A float can *not* go up past 2 floats, so #sidebar ends up in line with
#container in all browsers.
The solution is to wrap both #banner and #container in a div#wrapper,
and define #wrapper {float: left; width: 75%;}. Next, redefine #banner
and #container as {float: left; width: 100%;}. Then the sidebar will
line up on top, alongside the new #wrapper and in line with #banner,
styled as in your original; #sidebar { width:25%; float:right;}
The source-order is the same as before, and there's only one extra
wrapper-div in there.
Working example: <http://www.gunlaug.no/tos/alien/test_7160.html>
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
