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 CSS Foundations The Box Model Floats

Posted by David Bilson
David Bilson
13,819 Points

Floating image and content vs floating image and setting a margin on the content.

Guil,

In the tutorial on floats, you do the following;

  1. Float image to left
  2. Add margin or padding to image
  3. To prevent text wrapping the image, you float the paragraph and heading to the right.
  4. Apply clear fix to stop container collapsing.

I'm wondering what is the advantage of doing this?

I'd have done the following:

p {
    margin: 0 0 0 120px;
    font-size: 1.5em;
}

img { 
    float : left;
    margin: 0 1em 1em 1em;
}
  1. Float image to the left.
  2. Apply margin or padding to the image.
  3. Give the paragraph a left margin that is equal to the image width + any margins set.

They both prevent the text wrapping around the image.

Best Regards

Dave

1 Answer

Zebhdiyah Pykosz
PLUS
Zebhdiyah Pykosz
Courses Plus Student 1,021 Points
Zebhdiyah Pykosz
Zebhdiyah Pykosz
Courses Plus Student 1,021 Points

Honestly, in my experience (especially when you start getting involved with Responsive Web Design), it would be better do the the following: 

<div class="media clearfix">
  <div class="media-image">
    <img src="...">
  </div>
  <div class="media-content">
    <h4>...</h4>
    <p>...</p>
  </div>
</div>

I am assuming that video discusses the standard .clearfix solution, if not, here is a link http://nicolasgallagher.com/micro-clearfix-hack/

img {
max-width: 100%;
height: auto;
}

.media-image {
float: left;
width: 30%;
margin-right: 2%;
}

.media-content {
float: left;
width: 68%;
}

This solution will guarantee no matter how much content in the paragraph tag or if you have multiple p tags with content, the image will never have text below it. And it will all be fluid.

An even simpler solution would be: 

<div class="media clearfix">
   <img src="...">
  <div class="media-content">
    <h4>...</h4>
    <p>...</p>
  </div>
</div>

.media img {
float: left;
margin-right: 20px;
}

.media-content {
display: table-cell;
}

display: table-cell is only supported in ie8+ though.