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

Posted by Istvan Angyal
Istvan Angyal
1,338 Points

Why does the float property change the vertical margin of my header?

Following Nick's tutorial, when I added the float: left property to the header, on the bottom there was an added margin which I could not remove. This however did not appear in the tutorial. I went way back 3 videos earlier to see if I have missed something but it looks like I followe all the steps.

3 Answers

Mohsin Ayub
Mohsin Ayub
6,822 Points

Hi Istvan: If you add the html also it will more helpful for me. But by watching the css i can tell you only two things: 1: Maybe you can decrease the bottom-margin of 30px that you give to the header or you can decrese the margin that you give to the nav. 2: You can give the header some fixed height also.

Add the html so i can give you solid answer

Istvan Angyal
Istvan Angyal
1,338 Points

Thank you Moshin, Here is the HTML. In the meantime I am trying out what you said. Istvan

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Istvan Angyal | Graphic Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700,700italic,400italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Istvan Angyal</h1> <h2>Graphic Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80s style glow.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"> <a href="https://www.facebook.com/istvan.angyal.927"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a> <p>© 2014 Istvan Angyal</p>

  </footer>
</div>

</body> </html>

Mohsin Ayub
Mohsin Ayub
6,822 Points
Mohsin Ayub
Mohsin Ayub
6,822 Points

can you please paste the code?

Istvan Angyal
Istvan Angyal
1,338 Points

Here it is.

/*********************** GENERAL ***********************/

body { font-family: 'Open Sans', sans-serif; }

a { text-decoration: none; }

img { max-width: 100%; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

/*********************** HEADING ***********************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px; 0 0; font-weight: normal; }

/*********************** NAVIGATION ***********************/ nav { text-align: center; padding: 0px 0; margin: 10px 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px; 10px; } /*********************** FOOTER ***********************/

footer { font-size:: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/*********************** PAGE PORTFOLIO ***********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; } /*********************** COLORS **********************/ /*site body/ body { background-color: #fff; color: #999; }

/green header/ header { background: #6ab47b; border-color: #599a68; }

/nav background on mobile/ nav { background: #599a68; }

h1, h2 { color: #fff; }

/links color/ a { color: #6ab47b; }

/nav link color/ nav a, nav a:visited { color: #fff; }

/selected nav link/ nav a.selected, nav a:hover { color: #32673f; }

Mohsin Ayub
Mohsin Ayub
6,822 Points
Mohsin Ayub
Mohsin Ayub
6,822 Points

Hi Istvan, I have made only one change in your CSS:

  1. The instructor Nick set the float property on the header element because he wanted to remove the extra white space at the top of the header. This is not the best way to do that so you can remove the float property from header and add the margin: 0; property to the body, this will also remove the extra white space around the header and this is the good way of doing that.
body{
      font-family: 'Open Sans', sans-serif;
      margin: 0;
}

But if you don't want to remove the float property as the instructor Nick said that he will use it later for better purpose. Then you can add fixed height to the header 

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; height:90px}

I add a fixed height of 90px because i tested it already. Now i hope it will help you and if you have more confusion about that you can ask me.

Istvan Angyal
Istvan Angyal
1,338 Points

Thank you. I eventually downloaded the original HTML from the project files and found my mistake. I have set wrong values on the header. I corrected that and now it looks exactly as it should :) Thanks for your help!!