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 Nick Moore
Nick Moore
3,089 Points

Float my code please!

Hi, below is my code. I would like to use CSS to have the image on the left and the heading and paragraph on the right...I am a novice coder and have tried for hours with no luck. Maybe my HTML is wrong also. Thanks for your help in advance.

<div id="wrap"> <div id="news"> <h2>News Just In</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="pic"><img src="img/bali.jpg"><div> </div>

Nick Moore
Nick Moore
3,089 Points

Sorry code didn't come out. 

   <div id="wrap">
    <div id="news">
        <h2>News Just In</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at </p>
    </div>
    <div id="pic"><img src="img/bali.jpg"><div>
</div>

3 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

With floats, the HTML order is not important. But you do need to "clearfix" the wrapper, or it will not actually enclose the floats. So for this HTML (I fixed the missing the slash (/) in the closing tag of the pic div):

<div id="wrap">
  <div id="news">
    <h2>News Just In</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at </p>
  </div>
  <div id="pic"><img src="img/bali.jpg"></div>
</div>

...your CSS might look like this:

#pic {
  float: left;
}
#news {
  float: right;
}
/* "clearfix" the float wrapper */
#wrap:after {
  display: block;
  content: "";
  clear: both;
}
/* optional, if you want to restrict the wrap width and center it:
#wrap {
  width: ??;
  margin: auto;
} */

You might want to set a width for the wrapper if you don't want it to span the entire window.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Try switching your HTML so that it comes first before the text... like this

 <div class="pic"><img src="img/bali.jpg"><div>

    <div class="news">
        <h2>News Just In</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at </p>
    </div>

</div>

And then to float the image, you can try targeting the div with the class of pic by doing

.pic {
  float: left;
}

That's how I would start and should work but it may need a bit of playing around. :-)

Nick Moore
Nick Moore
3,089 Points
Nick Moore
Nick Moore
3,089 Points

thanks, do they need width properties??

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Possibly. it just depends on your design. Height and width properties won't affect any of the other elements though because by floated elements are out of normal document flow.