Two column layout problem with Firefox / Netscape 7

[Paul Burke]

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

[joeZ]

Re: Two column layout problem with Firefox / Netscape 7

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.

[Paul Burke]

Re: Two column layout problem with Firefox / Netscape 7

On 27 Jan 2005 05:20:49 -0800, "joeZ" <jzarate@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.
[color=blue]
>your div#content has got too much width.[/color]

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.)
[color=blue]
>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.[/color]

The more I play with this the worse it gets.[color=blue]
>
>there's a nice tutorial on this page.
>http://www.alistapart.com/articles/negativemargins/[/color]

Trying to get my head round it. Makes it harder when that tutorial is
back to front.[color=blue]
>
>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.[/color]

Thanks anyway. I'll keep trying but If I don't get it to work, I'll
go back to html.
plh
Paul

[joeZ]

Re: Two column layout problem with Firefox / Netscape 7

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.