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

Matthew Schad
Matthew Schad
9,381 Points
Posted by Matthew Schad
Matthew Schad
9,381 Points

Clearing Floated Elements. There must be something I'm not understanding

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Matthew Schad | HTML and CSS Portfolio</title>
      <link rel="stylesheet" href="CSS/styles.css">
      <link rel="stylesheet" href="CSS/normalize.css">
   </head>
   <body>
      <header>
         <a href="index.html"><h1>Matthew Schad</h1>
         <h2>Front End Web Developer</h2></a>
      </header>
      <nav>
         <a href="work.html">Projects</a>
         <a href="index.html">About</a>
         <a href="contact.html">Contact</a>
      </nav>
     <div class="container">
      <section>
        <div class="primary col">
          <div class="headshot">
            <img src="img/headshot" alt"from cape coral, florida" title"front end web developer">
          </div>  
           <p>I'm Matthew Schad, a web developer focused on expanding my knowledge in ways I can improve the user experience of webpages.</p>
        </div>
        <div class="secondary col">
          <p>My skills and qualifications include:</p>
           <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>Proficient in Windows and Mac Operating Systems.</li>
            <li>Knowledged in utilizing Adobe software, such as Photoshop, Illustrator, and InDesign.</li> 
            <li>Experience with Squarespace.</li>
            <li>Basic knowledge in SEO, such as utilizing alt tags, titles, and avoiding keyword saturation and rather aiming for good                   keyword phrases that are relevant to the content.</li> 
            <li>I have a good eye for composition, developed through photography, graphic design, and other forms of art.</li>
            <li>I genuinely enjoy assessing circumstances and solving problems.</li>
            <li>I'm an avid learner, ready for a career of learning and utilizing new innovations.</li> 
          </ul>
        </div>  
      </section>
     </div>
     <footer>
     </footer>
   </body>
</html>

```CSS

header {
  text-align:left;
  background-color:steelblue;
  position:absolute 120px;
  margin-top:-30px;
  padding: 5px;  
}

a h1 {
  font-size:3em;
  margin-bottom:-10px;
  margin-left:-7px:
}

a h2 {
  font-size:1em;
  margin-bottom:-1px;
  margin-left:10px;
}

h1, h2, nav a {
  color:#fff;
}

nav {
  background-color:darkslateblue;
  padding:10px;
  text-align:center;
}

nav a {
  display: inline-block;
  text-align:right;
  padding: 0 15px;
}

a {
  text-decoration:none;
}

img {
  max-width:45%
}

.container {
  box-sizing: border-box;
}

.col {
  float: right;
  padding: 1em;
}

.primary {
  width: 50%;
}

.secondary {
  width: 40%;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.headshot {
  display: inline-block;
  float:right;
  clear:both;
}

I can't get the headshot floated to the right side of the page, I've tried numerous ways of clearing the elements around it and collapsing the container space around the image, but no luck. What am I doing wrong?

2 Answers

Kai Nightmode
Kai Nightmode
37,045 Points

Just a guess since I have not inspected the above code live in a browser with a debug tool.

Maybe try replacing the .headshot rule with the following instead.

.headshot img {
  float: right;
  margin: 0 0 1.5em 1.5em; /* breathing space on the bottom and left */
}

P.S. - It looks like the alt and title tags are missing equal signs for the img tag in your original post. I'm thinking that may just be a copy and paste issue but still, couldn't hurt to double check.