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 How to Make a Website Adding Pages to a Website Style New Pages

Robert Ott
PLUS
Robert Ott
Courses Plus Student 4,614 Points
Posted by Robert Ott
Robert Ott
Courses Plus Student 4,614 Points

The use of clear: both;

After creating the about.html page and adding the photo, the page displayed as expected based on the lesson.

After adding the following CSS code to style the photo:

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

Everything still looked good.

BUT after adding the following CSS code for h3:

h3 { margin: 0 0 1em 0; }

the photo disappeared.

After re-watching the videos and reviewing some of the other Q&As I decided to add clear: both; to the .profile-photo CSS:

Now the CSS looks like this:

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

Everything works great!

My questions: Why did I need to add clear: both;? And should I add clear: both; as the first statement in the formatting sections just to keep from having this kind of issue in the future?

Thanks.

I hope both of my question are clear.

Robert

4 Answers

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Can you post your HTML as well? I don't see any reason why you would have had to add clear: both based on what you posted so far.

Robert Ott
PLUS
Robert Ott
Courses Plus Student 4,614 Points
Robert Ott
Robert Ott
Courses Plus Student 4,614 Points

What's the best way to post the html? Just cut/paste?

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

From the markdown cheatsheet:

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

Robert Ott
PLUS
Robert Ott
Courses Plus Student 4,614 Points
Robert Ott
Robert Ott
Courses Plus Student 4,614 Points

Hi Mike -

Here's my html code.

Thanks for looking into this.

Robert

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Robert Ott | Developer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Robert Ott</h1>
        <h2>Developer</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/dave.jpg">
              <img src="img/dave.jpg" alt="">
              <p>Dave loves to go to Steak n Shake.</p>
            </a>
          </li>
          <li>
            <a href="img/josh_gg.jpg">
              <img src="img/josh_gg.jpg" alt="">
              <p>So much fun at the Georgia games.</p>
            </a>
          </li>
          <li>
            <a href="img/abel.jpg">
              <img src="img/abel.jpg" alt="">
              <p>To cute for words. Always happy!</p>
            </a>
          </li>
          <li>
            <a href="img/grace.jpg">
              <img src="img/grace.jpg" alt="">
              <p>She has to raise three boys. She can do it.</p>
            </a>
          </li>
          <li>
            <a href="img/happy_jake.jpg">
              <img src="img/happy_jake.jpg" alt="">
              <p>Creating shapes using repitition.</p>
            </a>
          </li>     
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/RobertOtt"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/RobertWOtt"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; Robert Ott.</p>
      </footer>
    </div>
  </body>
</html>