Div overflow problem - article text flows over subelements

HTML & CSS
1

I have most likely an overflow problem and I think it´s related to
some height statements in the css (ether 100% or auto) - Thing is, as
you see on my page the text in the article flows over the subcontents
below (that are supposed to be under) - I have tried everything and I´m not a newbie but if it happens to me, this overflow problem must happen to other
so I thought posting this might be helpful for others too. (might be a tiny stupid issue I´m not seeing)

2

Would you mind describing what the page is supposed to look like?

The construction is a bit puzzling. eg:

There is an “empty” column to the right of the main image. What should it contain?

.clearfix is assigned to several empty divs (like “clear:both” might be) instead of to containers with floats (as it should be).

I’m just a little puzzled at the moment about where to go.

3

Hihi, and thanx for your reply.

No, seems to be that clear:both og clearfix won´t cut it

Here is a link to a design preview of the page
http://nyr.eldofninn.is/news_id.jpg

An unlimited amount of text in the article is supposed to push the sub elements down
I´ve done it thousands of times before but now it isn´t working somehow

4

I’m sorry to have to say it, but this layout is so contorted and messed up that the best thing to do is put a bullet through its head and start again. I don’t say that lightly, but it’s such an illogical structure that it seems virtually impossible to fix with a few quick tweaks—at least to me, anyhow. This is such an easy layout to do, as well. You have a header section, a middle content section and a footer section. Start with those three, and keep them separate. Then build up each section logically as you go.

5

Actually, I think it’s mostly “repairable”. Give me a few more minutes and I’ll post my suggestions… along with a jab if you actually think that I was suggesting that you should use clear:both where clearfix is now. Neither is appropriate. But it’s easy to tell how clearfix came to be there. :slight_smile:

6

I had to laugh at Ralph’s description of the layout, it fits perfectly. :slight_smile: Sometimes conspicuously “borrowed” code can be funny.

Step 1: - Delete all lines containing clearfix from the HTML. I think there are only 4.
The img tags need an alt=“” attribute to validate, if you’re interested.

Step 2: - Even if you’ve done it this way 1000s of times before, Delete everything in css that says:


height:auto;    (6 total)

height:100%;    (8 total)

width:100%;    (10 total)

Step 3: - Make the following changes - (Add the BLUE, Delete the RED items)

Lines 11, 15-16


#wide-header {[color=red][s]width:100%;[/s][/color] height:130px; background:url(http://nyr.eldofninn.is/graphics/header_bgr.png); [color=blue]overflow:hidden;[/color] }

#wide-page { [color=red][s]width:100%; height:100%;[/s][/color] background:url(http://nyr.eldofninn.is/files/page_bgr.jpg) [color=blue]center top repeat-x; overflow:hidden;[/color] }

#wide-subelements { [color=red][s]width:100%; height:auto; background:green;[/s][/color] [color=blue]overflow:hidden;[/color] }

Line 47


.container-main { width:940px; [color=red][s]height:auto;[/s][/color] margin-left:auto; margin-right:auto; [color=red][s]background:blue;[/s][/color] }

Lines 90-91


.imagefield { [color=red][s]position:absolute;[/s][/color] width:620px; [color=red][s]height:auto;[/s][/color] }
.news-image { [color=red][s]position:relative;[/s][/color] z-index:1; }

If I’ve kept my notes straight, this should “repair” the page.

If you have a chance to do this again… pass it up :slight_smile:
Start from scratch. There are plenty of good examples around.

“Try before you buy.”

7

Thanx a lot for this - I managed to slaughter my problem with this guidance

Thanx again :slight_smile:

Apparently all thouse height statements caused the problem

8

The height:100%, width:100%, and height:auto statements were chaff. They were not contributing to the problem at all, but they weren’t doing anything useful, either. Completely useless.

The page killers were two:

  1. The image was absolutely positoned which removed it from the normal flow of the page, but it’s space was not being accounted for. That problem was repaired by deleting the absolute positioning.

  2. “Uncleared” floats. An all-to-common problem. It was repaired by assigning “overflow:hidden” to their parent container. That is one of several methods of “clearing” floats.

The overall layout is indeed “unconventional”. There are simpler methods of achieving a two column layout with a header and footer.

I just tried to look at your page but apparently the updated code has not been sent to the server yet.

Best wishes.

9

kurbitur,

I would like to offer an apology for a mistake in my “fix-it” posts. The three recommended additions of “overflow:hidden” are wrong. Bad calls all. Please do not use them.

Within div#wide-subelements, you have implemented <div class=“container-main clearfix”>. That is all that section needs to clear its floats. It is the good example.

Within div#wide-page, we find <div class=“container-newsid-content”>. If you will add clearfix (or overflow:hidden) to that div, that will contain the floats therein.

Within div#wide-header, we find <div class=“container-header”>. If you will add clearfix (or overflow:hidden) to that div, that will contain the floats therein.

Sorry for the bad recommendation.

10

ok, that´s the reason the frontpage was a mess after the fix but the page I had problem with is perfect now :slight_smile: