Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Float Layout Mobile First Layout

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

2 questions (sticky footer and main-banner)

Hello,

  1. if you look at the web console, and you hover over .main-banner, you will see that the web-console gives .main-banner a surface that covers even the .main-header. I cant understand why the surface of .main-banner so wide.

  2. cant create a sticky footer, even with this rule:

html, body,
.main-wrapper,
.col,
.content-group {
  height:100%;
}

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <style>
        .main-header       { background-color: #384047; }
        .main-logo a       { background-color: #5fcf80; }
        .main-nav a        { background-color: #3f8abf; }
        .primary-content   { background-color: #caebf6; }
        .secondary-content { background-color: #bfe3d0; }
        .main-footer       { background-color: #b7c0c7; }


        *{
        box-sizing:border-box;

        }

        body{
        font: 1.1/1.5em sans-serif;
        color: #222;
        background:#edeff0;

        }
        .main-header{
        padding-top:20px;
        padding-bottom:20px;
        width:100%;

        }
        .main-nav li{
        margin-top:10px;

        }
        .main-logo{
        margin-bottom:0;
        margin-top:0;
        }
        .main-logo a,.main-nav a{
        display:block;
        border-radius:5px;
        text-align:center;
        padding:15px 20px;
        color:white;



        }
        .main-banner{
        text-align:center;
        padding:5px;


        }
        .col{
        padding:20px;

        }

        .main-footer{
        padding:20px;
        text-align:center;

        }
        .feat-img{
        width:100%;
        margin-top:10px;
        margin-bottom:10px;

        }
        /*building a bottom up page*/
        @media(min-width:769px)
        {



           .main-header,.main-logo, .main-nav li{

            float:left;
            }
            .main-logo{
            margin-right:80px;
            }
            .main-nav li{
            margin-right:8px;
            }

            .col{
            float:left;
            width:30%;
            height:100%;
            }
            .primary-content{
            width:40%;
            left:30%

            }
            .col::last-child{
            float:right;
            }

            .group{
            content:"";
            display:table;
            clear:both;


            }

            html, body, .main-wrapper, .col, .content-group{
            height:100%;
            }


        }
    <!--
    1) if you look at the web console, and you hover over
    .main-banner, you will see that the web-console gives
    .main-banner a surface that covers even the .main-header.
    I cant understand why the surface is so wide.

    2) cant create a sticky footer, even with this rule:
    html, body, .main-wrapper, .col, .content-group{
    height:100%;

    -->

    </style>


</head>
<body>
<div class="main-wrapper">
    <header class="main-header">
        <h1 class="main-logo"><a>Logo</a></h1>
        <ul class="main-nav">
            <li><a>Link 1</a></li>
            <li><a>Link 2</a></li>
            <li><a>Link 3</a></li>
            <li><a>Link 4</a></li>
        </ul>

    </header>
    <div class="main-banner">
        <h1>This is the Main Banner Heading</h1>
        <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>

    </div>
    <div class="content-group group">
        <div class="extra-content col">
            <h3>Extra Content</h3>
            <p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p>
            <hr>
            <p> Drumstick bresaola meatloaf ham hock salami tri-tip landjaeger beef filet mignon biltong boudin turkey.</p>
        </div>

        <div class="primary-content col">
                <img class="feat-img" src="http://lorempixel.com/400/300">
                <h3>Primary Content</h3>
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
        </div>
        <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
        </div>


    </div>
    <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
    </footer>
</div>

</body>


</html>
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

hi, I try to help you when I get to home but . You want your footer to stay allways when scrolling? if yes use position fixed.

3 Answers

Lukas Steyer
Lukas Steyer
10,889 Points
Lukas Steyer
Lukas Steyer
10,889 Points

Issue #2: .main-footer needs some modification, try this: 

.main-footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding:20px;
  text-align:center;
}
Lukas Steyer
Lukas Steyer
10,889 Points
Lukas Steyer
Lukas Steyer
10,889 Points

This is for your second problem ;)

Lukas Steyer
Lukas Steyer
10,889 Points
Lukas Steyer
Lukas Steyer
10,889 Points

Issue #1: Try to float the .main-banner to the left, and give it a width of 100% :

.main-banner{
  float: left;
  width: 100%;
  text-align:center;
  padding:5px;
}
Lukas Steyer
Lukas Steyer
10,889 Points
Lukas Steyer
Lukas Steyer
10,889 Points

And this is for your first problem ;) I hope this will work for you ;)

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Lukas,

I am not sure why I should add a position fixed to .main-footer so that my 3 colums reach all the way to the bottom. Usually position fixed is used to make the header with the navigation fixed..... Anway, I added the code you suggested, so that you can see what I mean. However the 3 columns are still not reaching the footer. Please run this code as is:

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <style>
        .main-header       { background-color: #384047; }
        .main-logo a       { background-color: #5fcf80; }
        .main-nav a        { background-color: #3f8abf; }
        .primary-content   { background-color: #caebf6; }
        .secondary-content { background-color: #bfe3d0; }
        .main-footer       { background-color: #b7c0c7; }


        *{
        box-sizing:border-box;

        }

        body{
        font: 1.1/1.5em sans-serif;
        color: #222;
        background:#edeff0;

        }
        .main-header{
        padding-top:20px;
        padding-bottom:20px;
        width:100%;

        }
        .main-nav li{
        margin-top:10px;

        }
        .main-logo{
        margin-bottom:0;
        margin-top:0;
        }
        .main-logo a,.main-nav a{
        display:block;
        border-radius:5px;
        text-align:center;
        padding:15px 20px;
        color:white;



        }
        .main-banner{
        text-align:center;
        padding:5px;


        }
        .col{
        padding:20px;

        }

        .main-footer{
          position: fixed;
          bottom: 0;
          width: 100%;
          padding:20px;
          text-align:center;
        }








        .feat-img{
        width:100%;
        margin-top:10px;
        margin-bottom:10px;

        }
        /*building a bottom up page*/
        @media(min-width:769px)
        {



           .main-header,.main-logo, .main-nav li{

            float:left;
            }
            .main-logo{
            margin-right:80px;
            }
            .main-nav li{
            margin-right:8px;
            }

            .col{
            float:left;
            width:30%;
            height:100%;
            }
            .primary-content{
            width:40%;
            left:30%

            }
            .col::last-child{
            float:right;
            }

            .group{
            content:"";
            display:table;
            clear:both;


            }

            html, body, .main-wrapper, .col, .content-group{
            height:100%;
            }


        }
    <!--
    1) if you look at the web console, and you hover over
    .main-banner, you will see that the web-console gives
    .main-banner a surface that covers even the .main-header.
    I cant understand why the surface is so wide.

    2) cant create a sticky footer, even with this rule:
    html, body, .main-wrapper, .col, .content-group{
    height:100%;

    -->

    </style>


</head>
<body>
<div class="main-wrapper">
    <header class="main-header">
        <h1 class="main-logo"><a>Logo</a></h1>
        <ul class="main-nav">
            <li><a>Link 1</a></li>
            <li><a>Link 2</a></li>
            <li><a>Link 3</a></li>
            <li><a>Link 4</a></li>
        </ul>

    </header>
    <div class="main-banner">
        <h1>This is the Main Banner Heading</h1>
        <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>

    </div>
    <div class="content-group group">
        <div class="extra-content col">
            <h3>Extra Content</h3>
            <p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p>
            <hr>
            <p> Drumstick bresaola meatloaf ham hock salami tri-tip landjaeger beef filet mignon biltong boudin turkey.</p>
        </div>

        <div class="primary-content col">
                <img class="feat-img" src="http://lorempixel.com/400/300">
                <h3>Primary Content</h3>
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
        </div>
        <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
        </div>


    </div>
    <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
    </footer>
</div>

</body>


</html>
orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Lukas,

Yes, this works; the surface of .main-banner does not cover that of .main-header. but can you please explain the logic behind what you did. If I understand your explanation, I am sure I will remember this a lot faster.

Cheers!

Issue #1: Try to float the .main-banner to the left, and give it a width of 100% :

.main-banner{ float: left; width: 100%; text-align:center; padding:5px; }

Kenan Xin
Kenan Xin
16,139 Points
Kenan Xin
Kenan Xin
16,139 Points

Issue #1: Reason for the issue: The reason that .main-banner appears to be covering the header is that the "header" element is floated, but .main-banner is not:

 @media(min-width:769px)
    {
           .main-header,.main-logo, .main-nav li{
            float:left;
        }        
   }

To explain: In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible

In a normal document flow, block level elements are laid out vertically as written in html codes, with one after another. what is a document flow However, when an element is taken out of the normal flow, which happens when an element is floated, what happens is that the floated element is not seen by the normal document flow anymore. For example, we have 3 divs:

<div class="div1">This is div1</div>
<div class="div2">This is div2</div>
<div class="div3">This is div 3</div>

The 3 divs are laid out one after another in the document flow. However, for example when div2 is floated, it is taken out of the normal document flow, other divs will not be able to acknowledge its presence, ignore the space taken by div2. What happened next, is that div1 and div2 would stack on top of each other.

i hope this could help with understanding.

In this case .main-banner is not floated while .main-header is floated, main-header is taken out of normal flow, therefore main-banner behave as if main-header does not exist, this explains why it is so wide.

To fix this: Step 1: remove float property from main-header

  @media(min-width:769px)
        {
          .main-logo, .main-nav li{

            float:left;
            }
     }

Step 2: fix margin collapse issue by applying clearfix on main-header

 <header class="main-header group">
        <h1 class="main-logo"><a>Logo</a></h1>
        <ul class="main-nav">
            <li><a>Link 1</a></li>
            <li><a>Link 2</a></li>
            <li><a>Link 3</a></li>
            <li><a>Link 4</a></li>
        </ul>

    </header>

For more information on floats , this is a very good start

By the way, 

            .group::after{
            content:"";
            display:table;
            clear:both;


            }

    .group{
            content:"";
            display:table;
            clear:both;

Spot the difference.

This is the reason for #issue 2