Forums

iamRDM

Background image of my div

  #bottom{
    background:url(head.gif);
    color: #000000;
    margin-top:10px;
    width:100%;
  }

is not inside the div.. here is the link http://ideacreativeindia.com/1

when i apply height to this div background is show near that "WHO ARE WE? " part

:Help:

Paulie_D

I suspect this is because that div either contains divs with no assigned height or are all floated and so it is collapsing.

How is it supposed to look?

iamRDM

Its looking exact what i need, except footer. I wand footer background to be #ffffff

but it won't work :( when I apply height to footer then its background appears on top -_-

jozsef

How about an overflow:hidden; on the #footer div

iamRDM

Thanks jozsef it worked :D Thanks a ton man. I was messing with this code since yesterday :D

ChrisP

#bottom isn't showing up because it's full of floated elements so it collapses on itself. Applying clearfix to bottom fixes your problem, but since you have head.gif it's some sort of checkered background.

#bottom:after {
    content: "";
    display: table;
    clear: both;
}

That will work as a clearfix for modern browsers, not for older browsers. For other clearfix solutions, see here.

overflow: hidden; will work, but may cause some unintended consequences later on.

Paulie_D

This because that div either contains divs with no assigned height or are all floated and so it is collapsing.

You will need to add

#bottom {
clear:both;
height: xxpx;
}

amd

#footer {
height: xxpx;
}

There are other option but that would be the simplest way.

jozsef

Well yes that's true, overflow:hidden will cut absolutely positioned elements, or select boxes if they hang out of the #footer div. But it there will not be any of these, then I don't see any problem using overflow:hidden as a clearfix solution.

Cheers.

iamRDM

OK ChrisP i'll use it too, Since i need this website for long :) Thanks for your valuable suggestion.

jozsef

I would like to add to this, that display:table isn't the best solution because it's not supported everywhere.The classic crossbrowser solution would be:


#footer:after {content:'';clear:both;display:block}
#footer {display:inline-block}
#footer {display:block}

ChrisP

@jozsef, you're correct, but it's supported down to IE8, http://caniuse.com/#feat=css-table

As I mentioned, it's not supported in older browsers, so if he's looking to design with IE7 or lower in mind, it's not the best solution..with THAT being said, your inline-block solution is no better, as inline-block was first supported in IE8 as well, in addition, the pseudo-element :after wasn't supported until IE8 either

http://caniuse.com/#feat=inline-block

treehouse : what would you like to learn today?

Forums

background image not in div..