floated layer pushes others out of the way

[Ray Shah]

I have this seemingly simple problem that has proven somewhat harder to
solve than I'd expected. I've been grappling with this for quite a
while, so any help would be greatly appreciated.

Please have a look:

http://www.thinkdesign.com/amrev-css2/

I have 2 html pages and the stylesheet linked from there.

The problem is that even when I define a z-index for #sections, it still
pushes the other divs down, out of the way.

The page uses the following definition for the floated layer that seems
to be causing the problems:

In CSS

#sections {
float:right;
width:148px;
font-size:0.8em;
text-align:right;
background: #c69;
font-weight: bold;
margin: -23px 0 0 0;
padding: 3px;
}

In HTML I have:
<div id="wrap">
<div id="header">
...

</div>
<div id="nav">
<ul>
<li>
<a href="#">Option 1</a>
</li>
...
...
...
<li>»
<a href="#">Option 6</a>
</li>
</ul>
<div id="sections">
Content in float. <br />
Content in float. <br />
Content in float. <br />
</div>
</div>
<div id="sidebar">
<ul>
<li>
<a title="Register" href="main_page">Register</a>
</li>
...
...
...
</div>
<div id="main">
<h1>Educators</h1> <h3>Teacher resources</h3>
</div>
<div id="footer">
</div>
</div>
Thanks again for your help!

[Rainbow News Service]

Ray Shah wrote:

I have this seemingly simple problem that has proven somewhat harder to
solve than I'd expected. I've been grappling with this for quite a
while, so any help would be greatly appreciated.

Please have a look:

http://www.thinkdesign.com/amrev-css2/

I have 2 html pages and the stylesheet linked from there.

The problem is that even when I define a z-index for #sections, it still
pushes the other divs down, out of the way.

If I put float:left into #nav, #sections no longer pushes the divs down.

Option10 is still covered up by sections, unless the #wrap is widened.
Making wrap wider makes an ugly gap between #sidebar and #main until you
change the float:right in main to float:left.

Then it looks like what you want.

[Spartanicus]

Ray Shah <ra*****@aol.com> wrote:

http://www.thinkdesign.com/amrev-css2/

I have 2 html pages and the stylesheet linked from there.
Links should be recognizable as links.

It's a bother having to unravel a complete design, your's wasn't to bad,
but you're likely to get more and better responses if you demonstrate
that you care about us not having to waste our time:
http://www.spartanicus.utvinternet.i...s_help_you.htm
The problem is that even when I define a z-index for #sections
Pardon?
, it still pushes the other divs down, out of the way.
Neither #sidebar nor #main should be floated.

Due to the CSS deficiencies of IE, floating unfortunately has become a
generic method to align in some peoples minds. This is unfortunate
because the floating mechanism is generally not properly understood, and
because CSS float rules are ridiculously complex all browsers have float
bugs.
The page uses the following definition for the floated layer that seems
to be causing the problems:
Don't propagate the Dreamweaver "layer" speak, it's nonsense.
In CSS

Don't post code to the group, an url is preferred.

Btw, Transitional is for legacy documents that cannot be updated, Strict
is the correct coding practice for newly authored or revised documents.

--
Spartanicus