473,320 Members | 1,857 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,320 software developers and data experts.

How to stop divs overlapping?

I have some divs I am using to get a two column layout
for a section of a page, like so;

<div1>
<div2> <div3>
blah blah blah blah
blah blah blah blah
blah blah blah blah
</div> </div>
</div>
<div4>
More blah blah blah blah etc etc
</div>

Problem: if I have more content in div3 than in div2
that content overlaps that in div4.
How do I prevent this?
Doesnt seem to happen in IE, just Mozilla etc

I hve an example
http://www.safenz.org.nz/indexnew.htm
The text beside the pictures overlaps the content
below it at less than 800x600

CSS at http://www.safenz.org.nz/css/index.css

Jul 20 '05 #1
3 25706
On Fri, 17 Oct 2003 19:50:03 +1300, "Peter Jenkins"
<pe**************************************@xtra.co. enzed> wrote:
I have some divs I am using to get a two column layout
for a section of a page, like so;

<div1>
<div2> <div3>
blah blah blah blah
blah blah blah blah
blah blah blah blah
</div> </div>
</div>
<div4>
More blah blah blah blah etc etc
</div>

Problem: if I have more content in div3 than in div2
that content overlaps that in div4.
How do I prevent this?
Doesnt seem to happen in IE, just Mozilla etc

I hve an example
http://www.safenz.org.nz/indexnew.htm
The text beside the pictures overlaps the content
below it at less than 800x600

CSS at http://www.safenz.org.nz/css/index.css


You don't seem to have had any responses yet, so I took a look.

You seem to be doing things in a rather complicated fashion, such as
using relative positioning to add some margin. I've not really managed
to disentangle what's going on. I suggest you start by simplifying
things, such as:

- stripping unused styles out of your stylesheet and ordering the
remaining styles a bit more logically, such as grouping all those
concerned with the page header together; comments might also help;
- stripping redundant classes, such as h1.title;
- stripping redundant DIVs, such as divider (add margin or padding to
the DIV above or below);
- not using positioning where margin, padding and/or floats will do the
job;
- reducing duplication ("font-family : Arial, helvetica, sans-serif;"
surely doesn't need to be repeated quite so many times - just put it on
the body, and perhaps on TD, TH to keep one or two older browsers
happy).

Then it might be easier to work out what exactly the problem is.

While I'm at it:

- "<h3>***And still a family waits.........</h3>" is not a heading, so
don't use <h3>. Use something like <p class=stress>.

- "If you can see this you are using an obsolete and non
standards-compliant browser. To see this and many other sites the way
they should look you need to upgrade to any one of the following;
Mozilla, Netscape 6 up, Opera, Konqueror, or IE4 up. " is not very
friendly or accurate. I can see it in Opera 7 if I disable your
stylesheet. CSS is designed to be optional. A better phrasing might be
"This site looks better with CSS enabled ..." though that will probably
still irritate users of audio browsers.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #2

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
On Fri, 17 Oct 2003 19:50:03 +1300, "Peter Jenkins"
wrote: You don't seem to have had any responses yet, so I took a look.

You seem to be doing things in a rather complicated fashion, such as
using relative positioning to add some margin. I've not really managed
to disentangle what's going on. I suggest you start by simplifying
things, such as:

- stripping unused styles out of your stylesheet and ordering the
remaining styles a bit more logically, such as grouping all those
concerned with the page header together; comments might also help;
- stripping redundant classes, such as h1.title;
- stripping redundant DIVs, such as divider (add margin or padding to
the DIV above or below);
- not using positioning where margin, padding and/or floats will do the
job;
- reducing duplication ("font-family : Arial, helvetica, sans-serif;"
surely doesn't need to be repeated quite so many times - just put it on
the body, and perhaps on TD, TH to keep one or two older browsers
happy).

Then it might be easier to work out what exactly the problem is.

While I'm at it:

- "<h3> And still a family waits.........</h3>" is not a heading, so
don't use <h3>. Use something like <p class=stress>.

- "If you can see this you are using an obsolete and non
standards-compliant browser. To see this and many other sites the way
they should look you need to upgrade to any one of the following;
Mozilla, Netscape 6 up, Opera, Konqueror, or IE4 up. " is not very
friendly or accurate. I can see it in Opera 7 if I disable your
stylesheet. CSS is designed to be optional. A better phrasing might be
"This site looks better with CSS enabled ..." though that will probably
still irritate users of audio browsers.


I have done some of the things you suggested, and tidied up my stylesheets
a bit. The divs aren't used to get a margin, but to prevent the content from
overlapping the menu. I could simplify it a bit though, but given that I have a
three column layout it might not be easy. The h1.title class isn't redundant by
the way, it's the title across the top of the page. There was some redundant
stuff in there though which I've weeded out. I got into the habit of repeating
font families in CSS from when I was still bothering with Netscape 4.x which
I have now given up on.

Thanks for your response anyway, the actual divs in question are
#pics and #stories, which are two columns inside #intro. For some reason
when the content in #stories gets longer than that in #pics, it seems to
overlap the content below - but only in Mozilla and related browsers, it is
OK in IE right down to IE4. I've set the height of #stories to the minimum
height that the content of #pics should get to, but this is a workaround
Regards
Peter J

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #3
On Wed, 22 Oct 2003 09:07:23 +1300, "Peter Jenkins"
<pe**************************************@xtra.co. enzed> wrote:
I have done some of the things you suggested, and tidied up my stylesheets
a bit. The divs aren't used to get a margin, but to prevent the content from
overlapping the menu.
Same thing in CSS terms. Apply some CSS margin, and the menu will
happily sit in it (assuming appropriate DIV nesting of course). But it's
up to you which technique you use.
I could simplify it a bit though, but given that I have a
three column layout it might not be easy. The h1.title class isn't redundant by
the way, it's the title across the top of the page.
But as you don't have some h1's with the title class and some without,
you could style h1 directly, without using a class.
Thanks for your response anyway, the actual divs in question are
#pics and #stories, which are two columns inside #intro. For some reason
when the content in #stories gets longer than that in #pics, it seems to
overlap the content below - but only in Mozilla and related browsers, it is
OK in IE right down to IE4. I've set the height of #stories to the minimum
height that the content of #pics should get to, but this is a workaround


Er ... that height setting seems to be the cause of the problem. When I
take that out, it works fine in both Opera and Mozilla.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: gpbmike | last post by:
I'm wondering if anyone else has had this problem before. Every now and then a div on my page will overlap with another. Thi only happens in firefox (vs. IE and Safari) and it corrects itself whe...
2
by: Daphne Tregear | last post by:
Is there every anything other than woe with IE...? I'm working on a redesign for my hobby pages in my personal home space before re-exporting them back to where they belong. I've based the...
3
by: michelle koen | last post by:
Hi Folks, on <a href="http://donbrice.com/new/page.php?section=schools">this page</a> and for all the sections I can't get Safari(2.02) or Firefox-PC(1.5) or the latest vers. of Opera-Mac to...
6
by: ralphJake | last post by:
hi :} i have been looking for a script like this for a few weeks now, and i am finally giving up and asking for help. everything i found involved preventing overlap in dreamweaver, i want to...
2
by: Jakub Łukomski | last post by:
hi. i've got a problem as follows, to which i can't find a solution to: i've got two divs, which are completely independent of each other (neither is a parent of child of another). they're...
1
by: spolsky | last post by:
hi, i have the following html. if padding given for the span it overlaps the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give sizes manually. how could i prevent this...
2
by: Liam Gibbs | last post by:
Hello everyone. I'm having a problem with a web page. What I have is one DIV (a header) overlapping the border around another DIV (a menu block). I want this, because I want to put this header...
0
by: dcardo | last post by:
Hi, I have the following CSS styles: #legend{ padding: 15px 0px 15px 0px; font:Georgia, "Times New Roman", Times, serif; font-size:1.8em; font-weight:bold;
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work

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.