473,216 Members | 1,202 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,216 software developers and data experts.

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 4325
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Doug McCrae | last post by:
http://www.btinternet.com/~doug.mccrae/go4learning/index.html As it says in the subject, a two column layout (plus header and footer boxes). I feel the left column really needs to be fixed width...
8
by: chris ciotti | last post by:
Greetings - After having received some feedback and some reading I reset a page using a "liquid" two column design. I am curious to know what the proper behavior of the left column is when the...
7
by: Xavier Onassis | last post by:
I would be grateful for recommendations for a CSS layout (header, 2 cols, footer) that can accomodate dynamically added elements. I am not having any luck so far getting this to work in...
21
by: fleemo17 | last post by:
I'm diving into the world of CSS and am blown away by the power of it. I'm redesigning a website, trying to eliminate the tables in the layout in favor of CSS. However I've come across a stumbling...
3
by: ckirchho | last post by:
Halo, I am trying to realize a two column layout basically like this: <html> <head> <style> leftCol { float: left; width: 15em; }
10
by: Luke | last post by:
Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it...
2
by: Edward | last post by:
I'm pursuing the holy grail of creating a two-column CSS layout with footer AND where the colors of the columns actually go all the way down. The code is below. Here is a graphic of how it...
1
by: Reiki Evolution | last post by:
This is the page that I am putting together: http://www.reiki-evolution.co.uk/draft/uk-first-degree-course-dates.htm The site consists of three columns: a sidebar floated left, a sidebar...
3
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.