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 Why Floats are Used in Web Design

how to center the text in .main-footer of my media query

Hello,

I am trying the center the text in .main-footer fo my media-query. If you look at my media query, you see that I gave .main-footer {text-align:center} but when you run the code and narrow the viewport, you will see the text in the main footer is flushed against the top edge of .main-footer. How can I center this text in the footer of my media-query. thanks

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">

<style>
/*=====================================================*/

.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}

body{
font: normal 1.1em/1.5 sans-serif;
color:#222;
background:#edeff0;
}
.main-wrapper{
width:90%;
margin: 0 auto;

}
.main-header{
padding:20px;


}

.main-logo, .main-nav, .main-nav li{
display:inline-block;

}
.main-logo a, .main-nav a{
display:block;
padding:10px 20px;
text-decoration:none;
color:white;
border-radius:5px;

}
.main-logo{
margin-right:30px;
border-radius:5px;

}
.main-nav li{
margin-right:8px;
border-radius:5px;

}
/*styling the columns
====================================================*/
.col{
display:inline-block;
float:left;
padding:20px;



}
.primary-content{
width:60%;


}
.secondary-content{

width:40%;

}

*{
box-sizing:border-box;


}

/*styling the picture
====================================================*/
.feat-img{
width:50%;
float:left;
padding:4px;
border:1px dotted black;
margin-right:15px;
}

/*styling the footer and the height of the page*/

html, body, .main-wrapper, .container, .col{
height:100%;

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

}
/*clear fix
==============================================*/
.group::after{
content:"";
display:table;
clear:both;


}
/*media query
============================================*/
@media(max-width:768px)
{

    .main-logo,
    .main-nav,
    .main-nav li,
    .col,
    .feat-img,
    .main-footer{
    display:block;
    height:initial;
    width:initial;
    margin:initial;


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

    }
    .main-footer{

    text-align:center;
    }




}

</style>
</head>

<body>
<div class="main-wrapper">
    <header class="main-header group">
    <h1 class="main-logo"><a href="#">Logo</a></h1>
        <ul class="main-nav group">
            <li><a href="#">Link1 </a></li>
            <li><a href="#">Link2 </a></li>
            <li><a href="#">Link3 </a></li>
            <li><a href="#">Link4 </a></li>
        </ul>
    </header>

  <div class="container group">
        <div class="primary-content col">
            <h2>Primary Content</h2>

            <img class="feat-img" src="http://lorempixel.com/400/300">  
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
            </p>

            <hr/>

            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa 
            </p>
        </div>
        <div id="clear"></div>
</div>

    <footer class="main-footer">

        <p>&copy; 2014 Example Layout </p>

    </footer>
</div>
</body>
</html>

7 Answers

Hugo Paz
Hugo Paz
15,622 Points

The best way for you to check what is happening is using chrome inspect element. The footer occupies more space due to the floated elements being taken from the normal flow of the document.

Hugo Paz
Hugo Paz
15,622 Points

On the media query add

.main-footer{

    text-align:center;
    clear:both;
    }

why did you give it a clear:both? cheers!

why did you give it a clear:both? cheers!

Hugo Paz
Hugo Paz
15,622 Points

Due to the float on the side column

Yes, but the columns are floated inside the div with id=container. In fact, the float:left is in .col{...} which is contained inside div id="container". The .main-footer is outside of the .container.

I thought we should only clear the float inside the containing element or the parent of the floated children, in this case .container.

Thanks Hugo!