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
Sharina V. Jones
11,459 PointsLayouts again
I'm trying to create space between my header and the rest of the content, however, everything I've tried seems to lower the header too.
I'm pretty sure I need to use clear or clearfix for the header but I still don't understand how it works. Nothing I've tried has fixed it.
Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Let's get weird!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SomethingGoesHere</h1>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Gatherings</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Join Us!</li></a>
</ul>
</nav>
</header>
<section id="form">
<h2 id="join">Join Us!</h2>
<form action="#" method="post">
<p>
<label for"fullname">Full Name</label>
<input id="fullname" name="Full Name" type="text">
<span>Tell us who you are...</span>
</p>
<p>Tell us what you are:</p>
<input id="female" type="checkbox" name="gender">
<label for="female">female</label>
<input id="male" type="checkbox" name="gender">
<label for="male">male</label>
<input id="other" type="checkbox" name="gender">
<label for="other">other</label>
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text">
<span>Tell us who you'd like to be...</span>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="text">
<span>8 or more holds the key</span>
</p>
<p>
<label for="val_password">Confirm your password</label>
<input id="val_password" name="val_password" type="text">
<span>Things aren't as they should be</span>
</p>
<p>
<input type="submit" value="Road to Nowhere" id="submit">
</p>
</form>
</section>
<footer>© 2014 Sharina V. Jones</footer>
</div>
</body>
</html>
/**********
Page Styles
************/
body {
background: #cc0000;
color: #fff;
font-family: sans-serif;
font-size: medium;
}
#wrapper {
width: 920px;
margin: 0 auto;
}
/*********
Header
********/
header {
float: left;
margin: 10px 0;
width: 100%;
clear: both;
}
h1 {
float: left;
clear: both;
}
/*****
Navigation
*****/
nav {
margin: 0px;
list-style: none;
float: right;
}
nav li {
float: left;
list-style: none;
margin-left: 20px;
margin-top: 0;
display: inline-block;
}
nav ul a li {
font-size: 1.2em;
font-weight: bold;
padding: 10px;
background: #7f0000;
color: #fff;
border-radius: 10px;
}
nav ul a:hover li {
background: #bf0000;
}
/*********
Form
********/
h2#join {
text-align: center;
margin-top: 100px;
margin-bottom: 0;
}
form {
background: #fff;
margin: 0 auto 0;
padding: 2em 4em;
max-width: 400px;
box-shadow: 0 0 1em #7f0000;
border-radius: 5px;
}
label {
display: block;
color: #7f0000;
font-weight: bold;
font-size: 1.6em;
}
input {
display: block;
box-sizing: border-box;
padding: .8em .5em;
border-radius: 5px;
outline: none;
width: 100%;
}
```CSS
Your thoughts?
1 Answer
George Cristian Manea
30,787 PointsThe margin declarations for the header should be modified those 10px goes for bottom margin and top margin so you push the content below the header 10px but you also push down the header 10px. replace it with this as an example margin: 10px 10px 140px 10px; . And when you use float left on an element , the clear:both declaration won't work.
Sharina V. Jones
11,459 PointsSharina V. Jones
11,459 PointsYou're right. It was the bottom border property of the header. Thanks!