SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div overflow problem - article text flows over subelements

    I have most likely an overflow problem and I think its 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 Im 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 Im not seeing)

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hihi, and thanx for your reply.

    No, seems to be that clear:both og clearfix wont 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
    Ive done it thousands of times before but now it isnt working somehow



    Quote Originally Posted by ronpat View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I had to laugh at Ralph's description of the layout, it fits perfectly. 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:
    Code:
    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
    Code:
    #wide-header {width:100%; height:130px; background:url(http://nyr.eldofninn.is/graphics/header_bgr.png); overflow:hidden; }
    
    #wide-page { width:100%; height:100%; background:url(http://nyr.eldofninn.is/files/page_bgr.jpg) center top repeat-x; overflow:hidden; }
    
    #wide-subelements { width:100%; height:auto; background:green; overflow:hidden; }
    Line 47
    Code:
    .container-main { width:940px; height:auto; margin-left:auto; margin-right:auto; background:blue; }
    Lines 90-91
    Code:
    .imagefield { position:absolute; width:620px; height:auto; }
    .news-image { position:relative; 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
    Start from scratch. There are plenty of good examples around.

    "Try before you buy."

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx a lot for this - I managed to slaughter my problem with this guidance

    Thanx again

    Apparently all thouse height statements caused the problem




    Quote Originally Posted by ronpat View Post
    I had to laugh at Ralph's description of the layout, it fits perfectly. 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:
    Code:
    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
    Code:
    #wide-header {width:100%; height:130px; background:url(http://nyr.eldofninn.is/graphics/header_bgr.png); overflow:hidden; }
    
    #wide-page { width:100%; height:100%; background:url(http://nyr.eldofninn.is/files/page_bgr.jpg) center top repeat-x; overflow:hidden; }
    
    #wide-subelements { width:100%; height:auto; background:green; overflow:hidden; }
    Line 47
    Code:
    .container-main { width:940px; height:auto; margin-left:auto; margin-right:auto; background:blue; }
    Lines 90-91
    Code:
    .imagefield { position:absolute; width:620px; height:auto; }
    .news-image { position:relative; 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
    Start from scratch. There are plenty of good examples around.

    "Try before you buy."

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #10
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thats the reason the frontpage was a mess after the fix but the page I had problem with is perfect now


    Quote Originally Posted by ronpat View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •