CSS Positioning divs wrt unrelated divs in IE

[Egon Pasztor]

Hi. I'm new at CSS, so maybe this is obvious, but I've
looked around quite a bit looking for a solution.

I'm playing with the vertical positioning of elements in a 2-column layout.
The prototype "scaffolding" page I'm playing with is here:

http://www.eecs.berkeley.edu/~pasztor/test.html

It looks right in "Mozilla Firefox", but not in IE 6. In IE 6, the three
"nav" blocks are rendered right after one another in a vertical column.

Instead, I'd like the "nav" blocks in the right column to render
near the content to which they relate. So the "nav 4"
block should be right across from the "content 4" block. That is,
there should be white space between "nav 1" and "nav 4", enough to bring
"nav 4" down to where "content 4" is.

These blocks are floats -- the left ones are "float:left; clear:left;"
and the right ones are "float:right; clear:right;". (So maybe IE's doing
it right and Firefox is the one with the bug? .. in Firefox the "nav 4"
block is right where I want it to be.)

But anyway, can anyone tell me how to align divs in one column with
divs in another? Thanks!

--Egon
PS -- (I tried using "position:absolute" divs instead of floats
for my "nav" blocks .. but those could overlap if the "nav" content is too
long. I'd like the "nav" blocks never to overlap, if possible..)

[John Moyer]

Egon Pasztor wrote:

Hi. I'm new at CSS, so maybe this is obvious, but I've
looked around quite a bit looking for a solution.

I'm playing with the vertical positioning of elements in a 2-column layout.
The prototype "scaffolding" page I'm playing with is here:

http://www.eecs.berkeley.edu/~pasztor/test.html

It looks right in "Mozilla Firefox", but not in IE 6. In IE 6, the three
"nav" blocks are rendered right after one another in a vertical column.

I have not tried this in IE 6. It seems to me that it might work to
insert something like this:
div.spacer {
clear: both;
line-height: 0; height: 0;
border: none;
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}

and

<div class="spacer">&nbsp;</div>

before content4.

It may even work to use "clear: both;" instead of left or right.

I hope this is helpful.

John Moyer
http://www.rsok.com~jrm/

[Egon Pasztor]

Thanks .. I've played with spacer divs and "clear; both" divs
for quite a while since my first post, and you're right,
they do the trick -- almost. However, I'm still stuck with
random 3-px width errors in IE/Win.

My new test page is here:

http://www.eecs.berkeley.edu/~pasztor/test2.html

and as you can see I've gotten the hang of aligning the divs in
both columns where I want them. The alignment is perfect in
Mozilla/Firefox.

But in IE/Win, the right edges of the divs are randomly
jittered by a few pixels -- the middle yellow box is wider
than the top and bottom yellow boxes; some of the turquoise
boxes are wider than others, and the entire frame is a few
pixels wider than my "width" style demands.

So I've found myself hunting through the "CSS hacks"
pages looking for a way to give one style command to IE
and a different set to other browsers. But I'm not happy with
this approach, because I only have IE/Win and Firefox here --
and who knows what problems IE/Mac or Opera or Konqueror
would have with any "hacks" I insert -- not to mention future
versions of these browsers.

I keep reading all these "horror stories" of designers discovering
that a hack to fix a bug in one browser breaks other browsers;
and I don't have all the browsers here to check!

Would this be easier with tables?
It seems it would be easier with tables...
"John Moyer" <jr*****@swbell.net> wrote in message
news:40************@swbell.net...

Egon Pasztor wrote:

Hi. I'm new at CSS, so maybe this is obvious, but I've
looked around quite a bit looking for a solution.

I'm playing with the vertical positioning of elements in a 2-column layout. The prototype "scaffolding" page I'm playing with is here:

http://www.eecs.berkeley.edu/~pasztor/test.html

It looks right in "Mozilla Firefox", but not in IE 6. In IE 6, the three "nav" blocks are rendered right after one another in a vertical column.

I have not tried this in IE 6. It seems to me that it might work to
insert something like this:
div.spacer {
clear: both;
line-height: 0; height: 0;
border: none;
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}

and

<div class="spacer">&nbsp;</div>

before content4.

It may even work to use "clear: both;" instead of left or right.

I hope this is helpful.

John Moyer
http://www.rsok.com~jrm/