SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Wrapper causing inner Div to show below

    Ok, I have a hunch that this has to do with block level vs. inline.

    But I have 2 divs. One is a wrapper around the other. I need the wrapper to just paint color and the inner dive to still show up inside the wrapper but it's not. The inner div has to be slightly less wide than its wrapper.

    #GlobalMain
    {
    background-color: #fff;
    width: 990px;
    height: 100%;
    display: block;
    }

    #MainContainer
    {
    background: url(/content/images/site/lbackground.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    width: 970px;
    }


    <div id="GlobalMain">
    <div id="MainContainer">

    contente here

    </div>
    </div>

  2. #2
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    display: block is not the issue. First, a div is already a block, so there's no point in defining it as such. Second, it's most likely the height: 100&#37;. Technically there is no easy way to do height: 100% on an element, because it only works if there is a parent element that has a defined height.

    Try removing that, or changing it to like height: 800px to see what kind of difference it makes.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming that #GlobalMain is the first div within the body, the 100&#37; height applied to it won't do anything unless both the html and body elements also get a 100% height.

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>>Try removing that, or changing it to like height: 800px to see what kind of difference it makes.

    But we're gonna have a fixed div at the bottom of our page for footer and this outer wrapper needs to extend down with that white background.

    But just forgetting that 100&#37; for now, my problem is that the inner div is showing up under the outer, as if it's not nested inside.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    But just forgetting that 100% for now, my problem is that the inner div is showing up under the outer, as if it's not nested inside.
    How can you tell when the outer has a white background? - If you put a border around the #GlobalMain div, you can see that it does surround the inner div.

  6. #6
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    >>>Try removing that, or changing it to like height: 800px to see what kind of difference it makes.

    But we're gonna have a fixed div at the bottom of our page for footer and this outer wrapper needs to extend down with that white background.

    But just forgetting that 100% for now, my problem is that the inner div is showing up under the outer, as if it's not nested inside.
    Any particular reason you can't just apply the background color to the body? There are a couple techniques you can use to sort of trick the effect of 100% height. The easiest way is setting a background image for your body and centering it on the page.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>Any particular reason you can't just apply the background color to the body?

    because we have a background image set to the body

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    As Centauri said if you set an element to 100&#37; height it looks to the parent. The parent (in this case body) will only be as high as it's parent. so html,body{height:100%;} is needed.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by espresso View Post
    >>Any particular reason you can't just apply the background color to the body?

    because we have a background image set to the body
    You could edit your background image to include the white portion of your body. Just a thought. I personally tend to stay away from anything 100% where I can, so I suggest be creative!
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, html is the parent of body but did not know I needed to do anything in CSS with the html tag

  11. #11
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    taking off the 100&#37; height on GlobalMain did not do anything to make sure the inner dive is nested. I still have the Global sitting on top of the inner. Just picture two blocks, one on top of the other.

  12. #12
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That cannot happen with the code you provided above - what is the complete page code?

  13. #13
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and I can't set the background to white because the background needs to be a tan to cover the background to infinity down.

  14. #14
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >>That cannot happen with the code you provided above - what is the complete page code?

    that is basically the entire page, 2 divs.

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I set up the code you provided in the first post, plus a body background colour so that the #GlobalMain div can be seen, #MainContainer is within #GlobalMain.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Your entire code should look something like
    Code:
    DOCTYPE
    html tag
    head tag
    title /title
    styles
    end styles
    end head
    body
    content
    /body
    /html
    Pseudo code it but we need the full page. I got the same results as Centauri.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me take a step back. Here it is before I added that GlobalMain. Maybe I don't need to use a GobalMain wrapper to get that white that's in MYes, I did not enclose all of what's going on, here it is:

    <div id="MainContainer">

    <!-- Header -->
    <div id="HeaderMain">
    HeaderMain
    <div id="HeaderContainer">

    </div>
    </div>

    <!-- TopNav Bucket -->
    <div id="SubHeaderMain">
    SubHeaderMain
    <!-- user control -->
    </div>

    <!-- Main Content -->
    <div id="MainContent">



    <!-- Footer -->
    <div id="FooterMain"></div>

    </div>
    </div>

    #HeaderMain
    {
    width: 982px;
    height: 167px;
    float: left;
    }

    #MainContainer
    {
    background: url(/content/images/site/background.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    background-color: #fff;
    height: 100&#37;;
    width: 990px;
    border: 1px solid red;
    }

    #MainContent
    {
    width: 989px;
    margin: 0px 0px 0px 0px;
    height: 970px;
    border: 1px solid green;
    }

    #SubHeaderMain
    {
    float: left;
    height: 35px;
    width: 980px;
    }

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Now we can WORK with that

    On #MainContainer remove the set height and add "overflow:hidden;"
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, that worked!

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Your welcome . If you have any more questions just ask.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    crap, check this out. I can't extend the MainContainer because if I do, the white extends out. The MainContent is what needs to extend down.

    http://www.codezest.com/post/site.png

    The MainContent is 970 and that's the white I need to extend down. Otherwise the background color gets overridden if I put a white background once the MainContainer image ends. it should be tan in those areas I showed in red, not white. Only the MainContent should extend down with white inside the MainContainer.

  22. #22
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is driving me nuts...

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It's the same technque, (you can set a min-height970px) add overflow:hidden; to #MainContent
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #24
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea, I had tried that but then the entire MainContainer shifts right! not sure why:

    http://www.codezest.com/post/site2.png

    so essentially now I have MainContainer & MainContent showing up side by side almost like a float left.

    Here's my updated styles:

    #HeaderMain
    {
    width: 970px;
    height: 167px;
    float: left;
    }

    #MainContainer
    {
    background: url(/content/images/site/background.jpg) no-repeat center top ;
    margin: 0px auto 0px auto;
    width: 990px;
    }

    #MainContent
    {
    width: 989px;
    margin: 0px 0px 0px 0px;
    min-height: 970px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid black;
    }

    #SubHeaderMain
    {
    float: left;
    height: 35px;
    width: 970px;
    }

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Post your current HTML inside of <body> so I can replicate the overflowing...don't give us the "general HTML".
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •