CODEWITHSUNDEEP
cssbackground-color
Matt Murphy
Matt Murphy

Reputation: 1619

Why does the background of my container/wrapper not extend behind all content

Im working on a portfolio for uni and the background of my container / wrapper does not extend vertically enough in order for all its content to have a back ground color. I'll post code below, any help would be appreciated.

HTML

<body>

    <section id="wrapper">

        <header>
            <hgroup class="title">   
                <h1>Matt Murphy</h1>
                <p>Personal Portfolio | University of Leeds | BA New Media</p>
           </hgroup>
         </header>

           <nav>
                <a href="home.html" class="parent">Home</a>
                <a href="about.html" class="parent">About Matt</a>      
           </nav>   

           <section id="modules">
               <h2>Modules Studies To Date</h2>
                   <section id="year_1">
                       <h3>Year 1</h3>
                         <p>History of Communications</p>
                         <p>Academic Skills and Contemporary Issues</p>
                         <p>Interface Design</p>
                         <p>Design For New Media</p>
                         <p>Basic Camera and Editing</p>
                         <p>Animation For New Media</p>  
                   </section>  

                   <section id="year_2">
                    <h3>Year 2</h3>
                         <p>Dynamic Web Programming</p>
                         <p>Communications Research Methods</p>
                         <p>Working in New Media/p>
                         <p>Media Policy</p>
                         <p>New Media Narrative and Gaming</p>
                         <p>Visual Communications</p> 
                   </section>    
           </section>

    </section>
</body>

CSS

body{
    color:#000;
    background-image: url(images/canvas.png);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;   
}

a:link {
    text-decoration:none;
    color:#000; 
}      
a:visited {
    text-decoration:none;
    color:#000;
} 
a:hover {
    text-decoration:none;
    color:#000;
}  
a:active {
    text-decoration:none;
    color:#000;
}

#wrapper {
    background-color:#FFF;
    padding:3%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display:block;
    margin:auto;
    width:60%;
    margin-top:2%;
}

header {
    text-align:right;
}

#modules {
    width:100%;
    display:block;
    margin:auto;
}

#year_1 {
    float:left;
}

#year_2 {
    float:left;
}

Upvotes: 0

Views: 3695

Answers (3)

amaters
amaters

Reputation: 2316

Basically the css-property 'float' on the section#year is the bad guy here.

If I replace your sections with div's and add an extra div to clear block rendering it works: http://jsfiddle.net/hoedinie/537sL/1/

Upvotes: 0

tw16
tw16

Reputation: 29585

To fix your problem you just need to add overflow: auto to #wrapper.

#wrapper {
    background-color:#FFF;
    padding:3%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    display:block;
    margin:auto;
    width:60%;
    margin-top:2%;
    overflow: auto; /* add this line */
}

However, another issue is that you are using HTML5 elements and the HTML5 shiv but you have not used the HTML5 doctype:

<!DOCTYPE html>

Upvotes: 1

Mitch Satchwell
Mitch Satchwell

Reputation: 4830

I assume you are having problems in IE? You are missing a doctype declaration. If you add a transitional doctype as per the example on W3Schools below it should work.

HTML doctype declaration

Upvotes: 0

Related Questions