Wrapper Background Height Is Incorrect

Discussion in 'CSS' started by mowthelawn, Feb 18, 2013.

0
  1. #1
    Hi there,
    Hoping someone can help me. I've been trying to fix this issue for several hours to no avail. We're using a customized wordpress theme. The background is static and there is a wrapper for the content. The wrapper background should be white, so that the content can be seen easily.
    However, the background does not work. If you scroll down, you will notice that the white background just ends. If I set a height on the wrapper, then the white background shows up for that specific height. Of course, I don't want to set a height since different pages have different heights.

    Another issue which may be related...
    On Chrome and Safari the width of the web page seems to be very wide, and you can actually scroll left/right. On Firefox it seems fine.

    The site is www.iconx.cn

    Thanks in advance..
     
    Solved! View solution.
    mowthelawn, Feb 18, 2013 IP
  2. #2
    I check your website and it is not well organized.

    Any way try to do this :

    <body>
    <div id/class="your name">

    **** add your all code ****

    </div>
    </body>

    in CSS call the id or class and give the color code like

    #abc or .abc {background :#ffffff}


    and for the width problem try to use in css :

    * {margin:0;padding:0;overflow:hidden}

    It will solve your problem. :)
     
    Last edited: Feb 19, 2013
    emdadblog, Feb 19, 2013 IP
  3. mowthelawn

    mowthelawn Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Hi emdadblog,
    Thanks for the quick response.
    I previously had
    <body>
    <div id="top-wrapper">
    </div>
    <div id="wrap">
    ** content **
    </div
    </body>

    The top wrapper had a full width background, so it wasn't included in wrap.
    The "wrap" div is what has the white background.
    I have changed it now so that the top wrapper is the same width as the "wrap div" and is included inside.

    So now it is like this:
    <body>
    <div id="wrap">
    **content**
    </div>
    </body>

    EDIT: After playing around with this a little more, adding overflow:hidden to the #wrap div seems to have resolved both issues.
    I'm really not sure why it resolved the first problem, but it now seems to be working. I understand that content within #wrap would not appear outside of its width. But why does it cause the background to fully cover the entire #wrap div only when that tag is present? If you happen to know why, I would love an explanation so I can understand.
    Thanks again for your suggestions.
     
    mowthelawn, Feb 19, 2013 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    It was obviously a float issue. Hiding the container's oveflow clears children's floats, that's the reason why it works.
     
    wiicker95, Feb 19, 2013 IP
  5. emdadblog

    emdadblog Member

    Messages:
    86
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #5

    Hello Mowthelawn,

    Sorry for late replay.. :(.

    To clear your doubt let me give you a small explanation.

    Do you know how the House Build ?

    If you check any house you will see that too many rooms in one house such as sitting, dining, bedroom, kitchen and so on.

    But all the rooms have a one common principle and it is roof of the house. So it does not matter how many rooms the house builder has created, the builder need to make all rooms under in a one roof(means parent roof).

    Without having a parent roof, the house will be count as one room house.

    I hope you get your point here....
     
    emdadblog, Feb 19, 2013 IP