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 April Ehrlich
April Ehrlich
4,164 Points

<body> is not wrapping around all content?

Hello! I'm trying to create a footer for my page. Just a simple 1px solid black thing. But, I've come to realize that my <body> tag doesn't encompass all of my content. So when I create a footer, it sits somewhere in the middle of the page, overlapping content.

I've tried html and body heights of 100%, but that doesn't seem to do the trick. Any idea how I could fix this?

<html>
<!-- /////// SHEETS /////// -->

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>April Ehrlich - Reporter</title>
  <link rel="stylesheet" type="text/css" href="Styles/main.css">
  <link rel="stylesheet" type="text/css" href="Styles/about.css">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">

</head>
<body>


<!-- ////////////// NAVIGATION ////////////// -->

<div class="navbar">
  <div class="navtitle"><p>April Ehrlich</p></div>
  <ul class="navlinks-large">
    <li><a href="http://aprilehrlich.com/index.html">Writing</a></li>
    <li><a href="http://aprilehrlich.com/radio.html">Radio</a></li>
    <li><a href="http://aprilehrlich.com/about.html">About</a></li>
  </ul>

  <ul class="navlinks-small">
    <li class="first"><a href="http://aprilehrlich.com/about.html">About</a></li>
    <li><a href="http://aprilehrlich.com/index.html">Writing</a></li>
    <li><a href="http://aprilehrlich.com/radio.html">Radio</a></li>
  </ul>

</div>

<div class="main">

<!-- //////////////  CONTENT ////////////// -->

<img class="portrait" src="Images/portrait.jpg">
<div class="about">
    <h2>April Ehrlich is a journalist.</h2>
        <p>She is a host and producer with <a href="http://ijpr.org" target="_blank">Jefferson Public Radio</a>. She hosts Morning Edition, where she picks out the day's news and announces it live over the air for several stations in <a href="http://ijpr.org/find-jpr-station" target="_blank">northern California and southern Oregon</a>. She also produces segments for the <a href="http://ijpr.org/programs/jefferson-exchange" target="_blank">Jefferson Exchange</a>, a daily program that engages newsmakers, authors and more in conversations about current events.</p>
    <br>
    <p>April has always been a reporter at heart. She tells data-driven stories about poverty, housing and environmental public health through radio, writing, photography, and design. She thrives on investigative pieces that require digging into large sets of data and interviewing a variety of sources for diverse perspectives of complex topics.</p> 
    <br>
    <p>April previously covered city government, poverty and housing for a daily in southern Oregon. Before that, she gained notereity for covering Idaho's emerging oil and gas industry for two papers on the Oregon-Idaho border. She later studied the energy industry as a fellow with the Institute for Journalism and Natural Resources.</p>
        <br>
        <p>April was one of 12 candidates selected to train with ProPublica's 2017 Data Institute. There, she studied data analysis, compilation, coding and design. She is versed in several coding languages and continues to study them through <a href="https://teamtreehouse.com/aprilehrlich" target="_blank">Treehouse</a>.
        </p>
</div>

<!-- ////////////// JAVASCRIPT ////////////// -->

<div class="footer"></div>


<!-- ////////////// JAVASCRIPT ////////////// -->

<script src="/Script/jquery-3.2.1.min.js"></script>
<script src="/Script/smartquotes.js"></script>
<script>smartquotes();</script>

<!-- ////////////// END ////////////// -->

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

I have two style sheets associated with it: main.css and about.css. The code from both are posted below

/* ******** MAIN.CSS ***********/

html {
  height: 100%;
}

body {
  min-height: 100%;

}

/* ----- navigation -----*/

.navtitle {
  float: left;
}

.navtitle p {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 50px;
  float: left;
}

ul {
    list-style-type: none;
    margin: auto;
    padding: 0 20px 0 0;
    overflow: hidden;
    background-color: white;
} 

.navlinks-small {
  display: none;
}

.navlinks-large a {
    display: inline-block;
    float: right;
    margin: 35px 0 0 0;
    padding: 14px 16px;
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
}

.navlinks-large a:hover {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 20px;
  text-decoration: line-through;
  font-color: black;
  text-transform: uppercase;
}

.navbar {
  border-bottom: 1px solid black;
}

/* ----- texts -----*/

h1 {
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 60px;
}

h2 {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 400;
    margin: 20px 0 10px 0;
}

h3 {
  font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
}

h4 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
    padding: 0;
    margin: 5px 0 8px 0;
}

p {
    margin: 0;
    font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  line-height: 170%;
}

a {
  color: #368892;
  text-decoration: none;
}

a:hover {
  text-decoration: line-through;
  color: #368892;
}

#bottom-line {
  border-bottom: 1px solid;
  z-index: 50;
}

.portfolio {
  width: 100%;
}

/* ----- footer -----*/

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: white;
  text-align: center;
  border-bottom: 1px solid black;
}

/* ----- responsive -----*/


@media (min-width: 201px) and (max-width: 660px) {


.navbar {
  margin: auto;
}

.navtitle {
  margin: auto;
  width: 100%;
}

.navtitle p {
  margin: auto;
  font-size: 30px;
  width: 100%;
  text-align: center;
}

.navlinks-large {
  display: none;
}

.navlinks-small {
    width: 100%;
    display: table;
    margin: 0 auto;
} 

.navlinks-small a {
    display: inline-block;
    margin: auto;    
    padding: 0 0 0 10px;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
}

ul {
    width: 100%;
    text-align: center;
}

li {
  display: inline-block;
}

.first a {
  padding: 0;
}

.navlinks-small a:hover {
  font-size: 10px;
}
}

/* ******** ABOUT.CSS ***********/
.portrait {
    float: left;
    width: 400px;
    margin: 0 5% 10% 1%;
    border-radius: 50%;
}

.about {
    width: 50%;
    float: left;
    position: relative;
    margin: 0 0 100px 0;
}

h2 {
    margin: 0 0 20px 0;
    padding: 0;
    line-height: 35px;
}

.main {
    margin: 100px 0 100px 0;
}

1 Answer

Masih Abjadi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Masih Abjadi
Front End Web Development Techdegree Graduate 26,328 Points
Masih Abjadi
.a{fill-rule:evenodd;}techdegree seal-36
Masih Abjadi
Front End Web Development Techdegree Graduate 26,328 Points

This is because you're using absolute position in the footer also you should use clearfix. When we have some content between 2 float elements, the UI needs to be clear:

     clear:both;