Forums

Get help. Give help. A Web Design and Development Community.

background image not in div..

  • # January 17, 2013 at 2:39 am

    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:

    # January 17, 2013 at 6:42 am

    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?

    # January 17, 2013 at 9:45 am

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

    # January 17, 2013 at 9:51 am

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

    # January 17, 2013 at 10:08 am

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

    # January 17, 2013 at 10:08 am

    This reply has been reported for inappropriate content.

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

    # January 17, 2013 at 10:13 am

    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.

    # January 17, 2013 at 10:14 am

    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.

    # January 17, 2013 at 10:20 am

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

    # January 17, 2013 at 11:25 am

    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}

    # January 17, 2013 at 11:55 am

    This reply has been reported for inappropriate content.

    @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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.