Background Repeat not running to bottom of page

Discussion in 'HTML and CSS' started by LazyCarrot, Apr 18, 2016.

  1. LazyCarrot

    LazyCarrot

    Joined:
    Apr 10, 2016
    Messages:
    4
    Likes Received:
    0
    Trying to figure out some 'unexpected' behaviour in my coding...
    My Dreamweaver (CS3) WYSIWIG renders it as I'd expect but my Browser doesn't
    So Im guessing some later/stricter rendering of the protocols.

    My basic HTML structure looks like this:

    <div id="frame-container" >
    <div id="sidebar"> .... </div>
    <div id="content"> .... </div>
    <div id="footing"> .... </div>
    </div>

    CSS:

    #frame-container {
    width: 960px; padding: 0; margin: 0; border: 0;
    background-image: url("../images/background.png");
    background-repeat: repeat-y;
    }

    #sidebar {
    width: 177px; padding: 0; margin: 0; border: 0;
    float: left;
    }

    #content {
    width: 783px; padding: 0; margin: 0; border: 0;
    float: left; }

    #footing {
    width: 960px; padding: 0; margin: 0; border: 0;
    float: left;
    height: 200px;
    background-color: #464646;
    }

    What is happening is:
    The underlying Background Repeat in <frame-container> finishes level with the bottom of the <content>
    Even if the <sidebar> has more content and extends below the <content>
    And in any event does not extend down behind the <footing> which is what I was expecting
    (and what my WYSIWIG editor is rendering).

    Is there any obvious misunderstanding that I have here about how this should work?

    Edit: Further investigation suggests that the <frame container> isn't wrapping around the other <divs>
    Do I need to assign the 'internal' <divs> to the external container somehow - not just imbed them in the html ?
     
    Last edited: Apr 18, 2016
    LazyCarrot, Apr 18, 2016
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.