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

HTML

Why do my <section> tags include my header as well?

So, basically, for those who have done Build a Website with Nick, I have a header banner that is flush with the top of my browser window. Everything is fine, but when I add a <p>, <h3>, or anything inside my section element to get some text in the body of my page, the header becomes unflush and gets yanked back down. Now for some reason, any code inside of my <section> and div tags affects this. Here is both the main.css and index.html. Thanks for any help, G

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Casey &amp; Donley | Legal Transcriptions</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Changa' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>        
    <header>
        <a href="index.html" id="logo">
          <h1>Casey &amp; Donley</h1>
          <h2>Legal Transcriptions</h2>
        </a> 
        <nav>
          <ul>
            <li><a href="index.html" class="selected">Home</a></li>
            <li><a href="about.html">About</a></li>    
            <li><a href="samples.html">Samples</a></li>
            <li><a href="contact.html">Contact</a></li>  
          </ul>
        </nav>
    </header>
      <div id="wrapper">
        <section>
          <h2>Topmost page content -- will go here.</h2>
          <!-- Add a home page image here with necessary css code in main.css -->
        </section>       
      <footer>
        <p><img src="phone.png" alt="Phone Logo" id="phonelogo">555.555.5555</p>
        <p>&copy; 2016 Casey &amp; Donley Legal Transcriptions Inc.</p>
      </footer>
    </div>      
  </body>
</html>
/******** 
GENERAL
********/

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

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

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

a {
    text-decoration: none;
}

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: 'Poppins', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-family: 'Changa', sans-serif;
    font-size: 1em;
    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;
}



/***********
FOOTER
***********/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc; /* A very light gray */
}

/***********
PAGE: HOME
***********/

/* use this tab for images exclusive to home page */

/***********
COLORS
***********/

/* site body */
body {
    background-color: #fff;
    color: #999;
}

a {
    color: #008080;
}

header {
    background: #008080;
    border-color: #003434;
}

h1, h2 {
    color: #fff;
}

nav {
    background: #006767;    
}

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

nav a.selected, nav a:hover {
   color: #008B8B; 
}

/**********
LOGOS
**********/

#phonelogo {
    padding-right: 5px;
}
Julian Gutierrez
Julian Gutierrez
19,325 Points

What browser are you using? Seems to be working on my end even with content inside of the section element in both chrome and firefox.

I'm using chrome. I'm really not sure what to do. I removed the <section> elements, replaced them with divs, but now I'm not sure what code to replace in my css file.

Julian Gutierrez
Julian Gutierrez
19,325 Points

Can you post the code you have in your normalize.css? Or if you are working in Workspaces you can create a snapshot of your project by clicking the camera icon on the top right of workspaces.

Sure, but I'm pretty sure that's not the problem.

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */    

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

3 Answers

Julian Gutierrez
Julian Gutierrez
19,325 Points

Can't seem to replicate your problem on my end. http://imgur.com/a/huemm But if you inspect your site using the developer tools it looks like your wrapper div is aligned to the top of the page. You can try removing the float on your header or adding a clear to your wrapper div.

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
    clear: left;
}

Man, thanks a ton! That fixed it! Either I just missed a teeny portion of the video, or the way I coded my gallery is a bit different than Nick's, but that did it!

Gabriel

I helped someone with this a couple of days ago. I played with her code and discovered if you take the section tag out everything will work like it is supposed to. I do not know why, it just did. It was a frustrating process because logically it should have been working. It was clear that the tags are outside the head but no css property was working properly. Adding margin or padding made the area above the head white as it was adding space above the bar.

Unless there is a clear reason why you need a section tag, I wouldn't use it. And yes, there is an argument that this below is clean and should be used. I think it is ultimately what works best for you or, if you have a standard you are supposed to keep.

<head>
</head>
<section>your various text bits here</section>
<section>image gallery or another set of text bits unrelated to above here</section>

Rather than a section tag I would recommend a div tag.

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. whereas: The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

Ok, thanks again Eric. So basically just take out the section, as well the the section code in my css, then just use divs?

Rules of thumb for using section

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

Don’t use it just as hook for styling or scripting; that’s a div Don’t use it if article, aside or nav is more appropriate Don’t use it unless there is naturally a heading at the start of the section

I did it without the divs when I fixed her code, I just wanted to show her it worked without the sections. Using the DIV tags would probably be better than nothing but, I left her with that to decide for herself.