Background of conainer suddenly stops...

[arbel]

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:

<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

[DaveWoods]

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

[wyrd33]

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.

[arbel]

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

[DaveWoods]

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?

[arbel]

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

[arbel]

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

[DaveWoods]

Change these two styles to the following and it should fix your problem.

.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.

[arbel]

great, thanks i'll try this out....why did you put a -33 padding-bottom?

[DaveWoods]

I didn't, that was already in your code

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