SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background of conainer suddenly stops...

    Hello,

    I'm a bit new to tableless designs, and I've run into a problem which I don't understand.

    you can see my design here:

    http://www.arbel-designs.com/css_test/

    here's the html code:

    Code:
    <div class="white-container">
        <div class="white-top"></div>
        <br>
        <div class="left-area"><div class="header-blue">Hello</div>
        <br>
      <div class="content">
        <p>      Duis au.....</p>
        </div><!--content-->
        </div><!--left-area-->
          <div class="right-area">
        <div class="first-box">
          <div class="box-white-top"><img src="images/box_white_top.gif"></div>
          <div class="box-white-center">
            <div class="box-white-content">ddd dfadf dsaf asdf asdf asdfa <br>
              <br>
              <br>
            dfasdfasdf asdf asdf sadfasd fasdf asdf asdf ads </div><!--box-whitecontent-->
          </div><!--box-white-center-->
          <div class="box-white-bottom"><img src="images/box_white_bottom.gif" width="180" height="19"></div>
        </div><!--box-first-box-->
      </div><!--right-area-->
     <!--<div class="white-bottom"><img src="images/content_bg_bottom.gif" width="780" height="71"></div>-->
        </div><!--white-container-->
    the background of the white-container div, doesn't extend to cover all the of the divs inside it....If I add a div at the end white-bottom it works, but extends a few pixels after the white-bottom div, and shows the background (which I don't want).

    I simply don't understand why it isn't wrapping everything.

    thanks

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not entirely sure what the issue is as you seem to have corrected the live version by putting the fix you mentioned in so it isn't clear what was happening.

    However, I'd suspect that it's probably because you're using floats within a container that isn't floated, possibly on the .box-white-content style?

    If the children are floated then I'd usually float the parent wherever possible to avoid this although you can also use overflow to correct this problem.

    If this doesn't help could you remove the fix so we can see the problem as it'll be easier to guide you to the correct place to add the fix

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually when a background fails to display a background correctly (happens in IE browsers) its because the container that has the background didn't have a width or height specified.

  4. #4
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, for the input. I've added an overflow:auto in .white-container. But the background still shows under the bottom most image.

    also, any other tips would be really helpfull =)

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought you were describing a problem that your white container wasn't containing it's children properly? If you can replicate this problem that you've initially describe then you shouldn't need the extra footer fix

    Could you change the live version at the url posted so that it shows the problem you describe or is it now this second problem you want solving?

    Sorry, you seem to be describing two separate issues so it's not clear which one you want solving?

  6. #6
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, for the input. I've added an overflow:auto in .white-container. But the background still shows under the bottom most image.

    also, any other tips would be really helpfull =)

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  7. #7
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Anyone know what is the problem with my design? why is there a bit of the background under the bottom most image inside the div?

    Thanks

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change these two styles to the following and it should fix your problem.

    Code:
    .white-bottom {
            float:left;
            vertical-align:baseline;
            padding-bottom:-33;
            height:71px;
    }
    .white-container {
    	background-image: url(images/bg.gif);
    	background-repeat: repeat-y;
    	width: 780px;
    	margin-left:auto;
    	margin-right:auto;
    	float: left;
    }
    You had a height of 73px applied but the image is only 71px, hence the repeated background.

    You don't need overflow on it, that was a suggestion for the other problem you were describing which you've put another fix in for (which probably wasn't necessary and you ignored my comment about taking it out and reverting back to your original problem which may have been easier to fix )

    You then need to float the bottom part so that the parent contains it, clearing it is causing problems.

    Just replace those two style with my code and it should work

    I'd also consider applying the decorative images as background images within CSS.

  9. #9
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great, thanks i'll try this out....why did you put a -33 padding-bottom?
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't, that was already in your code

    I'm pretty sure that you could safely remove that though.


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
  •