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
Chun Lin
5,771 PointsWhy when I added "float: left" that the header will become smaller?
I followed the example with course. But the results are different. When I added "float: left" that the header will become smaller.
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width:: 100%;
}
It's like this: http://codepen.io/Chunwei/full/xGKpQO/
But if I cancelled "float: left;". It is okay.
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width:: 100%;
}
It's like this: http://codepen.io/Chunwei/full/EjYoGP/
What's wrong about my code?
This is my code.
/************************
GENERAL
*************************/
#wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
color: #5a6321;
}
img {
max-width: 100%;
}
/************************
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: 'Open Sans', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal
line-height: 0.8em;
}
h2 {
font-family: 'Changa One', cursive;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/************************
NAVIGATION
*************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
/************************
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 li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
index.html
<header>
<a href="index.html" id="logo">
<h1>Chun Lin</h1>
<h2>Copywriter</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Porfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
Thanks.
2 Answers
John Steer-Fowler
Courses Plus Student 11,734 PointsIn your header css you actually have written two ('::') for the width when there should only be one.
So this:
width:: 100%;
Should be this:
width: 100%;
That should fix your issues
John Steer-Fowler
Courses Plus Student 11,734 PointsWith float, you are pushing the header element to the left, allowing the other elements to wrap around it.
If you let me know what you are trying to achieve I might be able to help you.
Chun Lin
5,771 PointsThank you!
I edited my question again. I try to show my coding and show on codepen. But no images.
I followed video example to code. But the results are different. I found key point is ""float: left;". But I don't know why? I just follow it.
My English is not good. If I have some mistakes. Just tell me. Thanks.
Chun Lin
5,771 PointsChun Lin
5,771 PointsOh, I made a stupid mistake. Thank you very much!
John Steer-Fowler
Courses Plus Student 11,734 PointsJohn Steer-Fowler
Courses Plus Student 11,734 PointsIt's not a stupid mistake. Everyone makes syntax errors :D
Keep up the good work