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 trialRobert Ott
Courses Plus Student 4,614 PointsThe 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
Courses Plus Student 16,968 PointsCan 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
Courses Plus Student 4,614 PointsWhat's the best way to post the html? Just cut/paste?
mikes02
Courses Plus Student 16,968 PointsFrom 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
Courses Plus Student 4,614 PointsHi 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>© Robert Ott.</p>
</footer>
</div>
</body>
</html>