How to Wrap Text Around View Page Listings

jggarley's picture

My problem is CSS Styling. I have a D7 view page listing my new articles. The fields for this page are :
Content: Title
Content: Image
Content: Body
Content: Link

I want the body text (teaser) to wrap around the image. my blow CSS did wrap the text around the image the way I want it but the problem is the second/third article does not float to the left. Please take a look here. It's on my localhost. http://tinyurl.com/7yz5876

.views-field-field-image {
float: left;
margin: 10px 20px 5px 0;

}
http://tinyurl.com/7yz5876

Environment:
Drupal Version: 7.8
Database system: Microsoft SQL Server
PHP: 5.2.17
Install profile: Acquia Drupal (acquia-7.x-1.7)

Any help will be appreciated.

Comments

Use the clearfix class

pixelwhip's picture

The problem is your floats aren't clearing. Drupal comes with a .clearfix class built-in. All you need to do, is add the clearfix class to the containing element that wraps each of your articles.

This screenshot should be similar to what you see in you views admin interface.

To learn more about clearfix see http://css-tricks.com/snippets/css/clear-fix/

I hope that helps!

Oh my goodness, it works!!

jggarley's picture

Oh my goodness, it works!! You are awesome!. What a trick...

Awesome!

pixelwhip's picture

Glad I could help.

I really appreciate your

jggarley's picture

I really appreciate your speedy response. It was driving me nut. I tried everything and couldn't figure out what I was doing wrong...This is what makes Drupal difference from the other - the community..:)

Wow

IWasBornToWin's picture

I can't tell you how long I had this same issue. I'm very grateful I found this post! I was able to get it somewhat fixed by inserting clear:left but it was still stacked wrong. Clearfix fixed it. Thanks!

Would anybody advise where

haradhansharma's picture

Would anybody advise where float class to be implemented? i have aded this in theam css file, but not working.

Design 4 Drupal

Group events

Add to calendar

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week