468,110 Members | 1,715 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,110 developers. It's quick & easy.

Two column layout problem with Firefox / Netscape 7

Hi all
I am hoping someone can help with a 2 column layout.
It works ok in IE, but the second column (right) appears below the
first column when viewed in FF or NS.

Here is the url http://tinyurl.com/58ewa
The html and css pass validation, but fail to see the problem.
I am sure it is something probably really simple. But it beats me to
what it is.

Can anyone please shed any light on this ?

Thank you kindly.

Paul Burke
Jul 21 '05 #1
3 4192
your div#content has got too much width.
I just put 'width:300px' in the #content, and it put itself next to the
menu.
that's because , in a float, if the div can't find enough room in the
navigator window to be next to the other div which is also 'floated',
it goes down.
there's a nice tutorial on this page.
http://www.alistapart.com/articles/negativemargins/
basically, for twho 'columns', you set one div with 100% of the width.
(the 'content' div, in this case), and then you define -for this div-,
a margin-right of -120px (negative), supposing you want the menu div to
be 120px width.
now you have room for both.
you also need to put a div inside de content div, where everything
which used to go inside the content div shall go, and then define a
120px margin-left. for that 'inside' div
anyway, you'll find everything in the tutorial
have fun.

Jul 21 '05 #2
On 27 Jan 2005 05:20:49 -0800, "joeZ" <jz*****@gmail.com> wrote:

Hi JoeZ

First I would like to say thank you for the help.
Secondly, it works ok in IE (I know IE is broken as such) but I didn't
think it would break *that* badly in other browsers.
your div#content has got too much width.
My div#content width is left blank. Changing it to 300px makes it look
real s**t (I know you did that as an example.)
I just put 'width:300px' in the #content, and it put itself next to the
menu.
that's because , in a float, if the div can't find enough room in the
navigator window to be next to the other div which is also 'floated',
it goes down.
The more I play with this the worse it gets.
there's a nice tutorial on this page.
http://www.alistapart.com/articles/negativemargins/
Trying to get my head round it. Makes it harder when that tutorial is
back to front.
basically, for twho 'columns', you set one div with 100% of the width.
(the 'content' div, in this case), and then you define -for this div-,
a margin-right of -120px (negative), supposing you want the menu div to
be 120px width.
now you have room for both.
you also need to put a div inside de content div, where everything
which used to go inside the content div shall go, and then define a
120px margin-left. for that 'inside' div
anyway, you'll find everything in the tutorial
have fun.


Thanks anyway. I'll keep trying but If I don't get it to work, I'll
go back to html.
plh
Paul
Jul 21 '05 #3
I've seen you're 'back in the chaingang', in the table world.
Well, brave for you!!!
Anyway, it's working now, and that's what counts.

Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Doug McCrae | last post: by
7 posts views Thread by Xavier Onassis | last post: by
21 posts views Thread by fleemo17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.