469,290 Members | 1,887 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

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 25345
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by gpbmike | last post: by
2 posts views Thread by Daphne Tregear | last post: by
3 posts views Thread by michelle koen | last post: by
6 posts views Thread by ralphJake | last post: by
2 posts views Thread by Jakub Ɓukomski | last post: by
1 post views Thread by spolsky | last post: by
2 posts views Thread by Liam Gibbs | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.