cross-browser right sidebar

David Schwartz · Jun 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

Jonathan N. Little · Jun 20, 2008

David said:
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

David Schwartz · Jun 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

David Schwartz · Jun 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

David Schwartz · Jun 21, 2008

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?

Click to expand...

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

dorayme · Jun 22, 2008

David Schwartz said:
Good point!

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?

David Schwartz · Jun 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

David Schwartz · Jun 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

Jonathan N. Little · Jun 23, 2008

David said:
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...

David Schwartz · Jun 24, 2008

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.

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

Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Help with code	0	Jun 12, 2022
Aligned to the left	3	Apr 19, 2023
Stuck with html and css	25	Dec 14, 2022
Please Help?	0	Jul 23, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

cross-browser right sidebar

David Schwartz

Jonathan N. Little

David Schwartz

David Schwartz

David Schwartz

dorayme

David Schwartz

David Schwartz

Jonathan N. Little

David Schwartz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads