Picture to left; Comments to right

HTML & CSS
1

I need some help creating a layout for User Comments like the one found on USA Today’s website here

How do I get the thumbnail to be to the left and all of the text to be to right with a “gutter” and left alignment?

I am guessing you

Float:Left;

the thumbnail, but am unsure how to tackle the AuthorName, PostDate, Comments.

Thanks,

Debbie

2

Wrap the image in a <p> element or other appropriate block element, and float that wrapper left. For the text, &c. block, you need to establish a new block formatting context. Use {overflow:hidden;}* on the text block container.

Treat the text block as you would any container; float stuff or not, make columns, whatever.

Generic specimen:


<div class="post">
  <p class="avatar"><img src="av-90210.jpg"
                 alt="$name\\'s avatar" /><p>
  
  <div class="post-text">
    <p>blah blah blah</p>
  </div>
</div>
==============
.post {
    overflow: hidden;
    }

p.avatar {
    float: left;
    width: 100px;
    }

.post-text {
    overflow: hidden;
    }

cheers,

gary

*Another means may be needed, but this will work in a vast majority of cases.

3

What does overflow:hidden do again?

(I always get mixed up on that one?!)

Also, will your code create a “gutter” between the picture and the text so that it appears like the picture and text ae in two separate columns and so the text does not wrap underneath the picture?

Thanks,

Debbie

4

in this case, overflow hidden helps clear floated elements in a cross browser friendly way. Adding a margin-right: will create that gutter.

5

So if you remove overflow:hidden then the text would wrap beneath the picture?

Debbie

6

Yep, overflow, other than visible (the default) creates a new block formatting context. The element will become aware of sibling and cousin float elements, and not slide under them, and the element will expand to enclose its float descendents.

For your homework assignment;), make an example page using the stuff here, and put borders and bg-colors on the block elements. Watch where everything goes or doesn’t go, depending on the overflow property.

cheers,

gary

7