cross-browser right sidebar

06-20-2008

I'm trying to create a sidebar of fixed width. The following code
works in IE7 but not FF2. What's the best approach to do this in both
of these browsers?

<html>
<head>
<style>
#right {
float: right;
background-color: Silver;
height: 300px;
width: 100px;
margin-left: 50;
}

#left-1 {
background-color: Lime;
height: 100px;
margin-right: 30;
}

#left-2 {
background-color: Yellow;
height: 100px;
margin-right: 160;
}
</style>
</head>
<body>
<div id="right">blah<br />blah<br />blah<br /></div>
<div id="left-1">blah</div>
<div id="left-2">blah</div>
</body>
</html>

TIA,
David

06-20-2008

David Schwartz wrote:
> I'm trying to create a sidebar of fixed width. The following code
> works in IE7 but not FF2. What's the best approach to do this in both
> of these browsers?

Better to have a URL...

Not doctype so IE will be in quirks mode, all bets on constant rendering
across browsers is off.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

>
> <html>
> <head>
> <style>
> #right {
> float: right;
> background-color: Silver;
> height: 300px;
> width: 100px;
> margin-left: 50;
^^
50 what, bananas?
> }
>
> #left-1 {
> background-color: Lime;
> height: 100px;
> margin-right: 30;
^^
again 30 what?
> }
>
> #left-2 {
> background-color: Yellow;
> height: 100px;
> margin-right: 160;
^^^
> }
> </style>
> </head>
> <body>
> <div id="right">blah<br />blah<br />blah<br /></div>
^^^^
This *XHTML*? If so you are asking for more problems with MSIE...

> <div id="left-1">blah</div>
> <div id="left-2">blah</div>
> </body>
> </html>
>
> TIA,
> David

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

06-20-2008

> Not doctype so IE will be in quirks mode, all bets on constant rendering
> across browsers is off.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">

Good point!

> 50 what, bananas?> }

Another good point. This helped a lot, not surprisingly. However, the
margin is relative to the side of the window rather than the 'right'
div. How do I get the left divs to be sensitive to the position of the
right div? FYI, there will be additional left divs below the right div
and I'll need them to extend to the page width (minus the same
margin).

TIA,
David

06-20-2008

> Make them (the left divs) overflow: auto (or hidden) so they become
> block formatting contexts.

I used 'overflow: auto' for the left divs and it's looking
great in FF but not in IE7 in which the right div isn't floating at
all but, rather, pushing the left divs down the page. Any ideas why
that might be?

Thanks for your help!!

David

06-21-2008

On Jun 21, 3:00 am, Ben C <spams...@spam.eggs> wrote:
> On 2008-06-20, David Schwartz <david...@gmail.com> wrote:
>
> >> Make them (the left divs) overflow: auto (or hidden) so they become
> >> block formatting contexts.
>
> > I used 'overflow: auto' for the left divs and it's looking
> > great in FF but not in IE7 in which the right div isn't floating at
> > all but, rather, pushing the left divs down the page. Any ideas why
> > that might be?
>
> Interesting. The spec _does_ say browsers can do that if they want, but
> I didn't think IE did.
>
> But I don't know much about IE.
>
> CSS 2.1 9.4.1:
>
> In a block formatting context, each box's left outer edge touches the
> left edge of the containing block (for right-to-left formatting, right
> edges touch). This is true even in the presence of floats (although a
> box's line boxes may shrink due to the floats), unless the box
> establishes a new block formatting context (in which case the box
> itself _may_ become narrower due to the floats).
>
> CSS 2.1 9.5:
>
> The margin box of a table, a block-level replaced element, or an
> element in the normal flow that establishes a new block formatting
> context [p. 126] (such as an element with 'overflow' other than
> 'visible') must not overlap any floats in the same block formatting
> context as the element itself. If necessary, implementations should
> clear the said element by placing it below any preceding floats, but
> may place it adjacent to such floats if there is sufficient space.

So, anyone have a solution? I can't imagine I'm the first person to
raise this issue, am I?

David

06-22-2008

In article
<5058e569-01da-4001-8c2b->,
David Schwartz <> wrote:

> > Not doctype so IE will be in quirks mode, all bets on constant rendering
> > across browsers is off.
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> > "http://www.w3.org/TR/html4/strict.dtd">
>
> Good point!
>
>
> > 50 what, bananas?>
> > }
>
> Another good point. This helped a lot, not surprisingly. However, the
> margin is relative to the side of the window rather than the 'right'
> div. How do I get the left divs to be sensitive to the position of the
> right div? FYI, there will be additional left divs below the right div
> and I'll need them to extend to the page width (minus the same
> margin).
>

Since you know the exact width of the right div, 100px, it is right
there in your CSS, just simply add 100px to the right margin of the
yellow div you want pushed away from the right div. Or is there some
complexity I am missing? Are you really not meaning to have a width on
the right float and wanting to know how to cope in that situation?

--
dorayme

06-23-2008

> Hey, dude, it looks exactly the same to me by adding a strict doctype:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> ...which should be the first/top line of the doc.

Doesn't work for me.

David

06-23-2008

> Since you know the exact width of the right div, 100px, it is right
> there in your CSS, just simply add 100px to the right margin of the
> yellow div you want pushed away from the right div. Or is there some
> complexity I am missing? Are you really not meaning to have a width on
> the right float and wanting to know how to cope in that situation?

The right div is fixed width but, in the actual application, it's of
arbitrary height (data driven) and there are a number of left divs,
most of which will be positioned below the right div and should go to
the window edge (minus the margin, of course).

David

06-23-2008

David Schwartz wrote:
>> Hey, dude, it looks exactly the same to me by adding a strict doctype:
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>>
>> ...which should be the first/top line of the doc.
>
> Doesn't work for me.

It is not the *only* thing you need to do, it is not a magic bullet, the
rest of markup has to be correct...time for a URL...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

06-23-2008

On Jun 23, 1:56 pm, Neredbojias <me@http://www.neredbojias.net/_eml/
fliam.php> wrote:
> On 23 Jun 2008, David Schwartz <david...@gmail.com> wrote:
>
>
>
> >> Hey, dude, it looks exactly the same to me by adding a strict doctype:
>
> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> >> "http://www.w3.org/TR/html4/strict.dtd">
>
> >> ...which should be the first/top line of the doc.
>
> > Doesn't work for me.
>
> > David
>
> That's weird. I copied your code from the post, pasted it as-is in a doc
> file with .html extension, and simply added the doctype on top. It worked.
> Perhaps your version of ff is to blame. I was using ff 2.0.0.14. If that
> isn't it, I don't know what is.
>
> --
> Neredbojiashttp://www.neredbojias.net/
> Great sights and sounds

Sorry for not being clear; it's IE7 that's the problem.

I'm afraid that I don't have access to a freely available web server
to post the page to.

David

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Extension for sidebar Instant Messenger?	Jaxim	Firefox	0	10-22-2004 11:15 PM
Search sidebar in Firefox?	Pat	Firefox	2	09-08-2004 02:54 AM
Add AltaVist to Sidebar?	prizm	Firefox	1	07-25-2004 03:02 AM
Sidebar	Dick	Firefox	1	01-09-2004 08:24 PM
Mozilla Mail Folders Sidebar Question	Ray	Firefox	1	10-28-2003 03:08 AM