Dinh
Have not seen your original email, but going on the images and comments, you
want your page to look like:
|------------------------|
| header |
|------------------------|
| col1 | col2 |
| col1 | |
|------------------------|
| footer |
|------------------------|
this will work
<div id ="header" style="width: 100%;"> header stuff </div>
<div id ="container" style="width: 100%; background: #fc3 url(for 500px wide 1
px high #ffff99 gif) repeat-y fixed 75% 0%;">
<div id ="col1" style="width: 74%; float: left"> col1 stuff </div>
<div id ="col2" style="width: 24%; float: right"> col2 stuff </div>
<div id = "clearing" style="clear: both;"></div>
</div>
<div id ="footer" style="width: 100%;"> footer stuff </div>
Go read Dan Cederholm's faux columns
http://www.alistapart.com/articles/fauxcolumns for a full explanation of the
container div and background image to get the column look.
Note 74% + 24% do not make 100%, browsers do not add up.
And the clearing div is just for old browsers.
Nick
http://nickcowie.com
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Gunlaug Sørtun
Sent: Sunday, 25 September 2005 5:18 AM
To: [email protected]
Subject: Re: [WSG] Need help on css positioning
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
******************************************************
This email is from the Department of Consumer and Employment Protection and any
information or attachments to it may be confidential. If you are not the
intended recipient, please reply mail to the sender informing them of the error
and delete all copies from your computer system, including attachments and your
reply email. As the information is confidential you must not disclose, copy or
use it in any manner.
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
