Forum Moderators: not2easy

Message Too Old, No Replies

Divs side by side x-browser

         

morris minor

3:16 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



I have two divs nested in a larger div. I want these two to display side by side, and for this to work down to NN4 . . .

My efforts with relative positioning etc fail miserably.

Can anyone help?

Thanks guys 'n gals!

morris minor

3:24 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



Oh - float:left!

grahamstewart

3:30 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Float one in the margin of the other.


#div1 {
float:left;
width: 500px;
}
#div2 {
margin-left: 510px;
}

Either that or use absolute positioning.

However, this won't work in NN4 because I don't think NN4 understands float (or any real CSS apart from fonts). But without the CSS the divs will appear one after the other - which is probably 'good enough' for NN4 users (remember x-browser doesn't mean it has to look identical in all browsers - it just has to be usable!).

If thats not an acceptable solution then you'll probably have to use tables because NN4 is seven years old and basically doesn't support CSS.

morris minor

3:32 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



But they overlap slightly in NN4.

I think I need some help here . . .

domokun

5:16 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



nn4?!
move on - leave that browser behind you, there are many more popular alternatives these days

Gibble

5:22 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Forget NN4

In a week I've only had a total of 15 views by NN browsers below version 6. And all NN browsers make up a mere 1.2% of all my traffic.

TheDoctor

4:09 pm on Feb 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



NN4 thinks it understands float, but it's wrong.

However, you can use this to your advantage, since:

  1. NN4 understands fonts, text-align, colouring and other basic stuff.
  2. You can hide CSS rules from NN4 by the use of @import.

What you do is to first style your page in a basic fashion that wil be understood by NN4 - ie don't do any floating. Tese rules go into one style sheet that can be read by everything. Then you create another style sheet that floats your divs. Include that in your page using @import (or one of the other variants that hide CSS from NN4).

You then not only have a page whose content can be read by the few NN4 users who visit it, but you've also turned NN4 into a debugging tool. If you have any problems with the floating, you can always check that you've got the basics right by looking at your page using NN4. (I used this technique recently, and it saved me a lot of time.)