Dynamic Drive CSS Library- Floating image with no text wrap

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

CSS Library: Image CSS: Here

Floating image with no text wrap

Author: Dynamic Drive

By default, floating an image causes the surrounding text to wrap around it, such in in the below example:

A safari park is a large nature reserve intended for safari tours and encounters with rare wildlife. They are common in Africa, but many exist elsewhere, including popular parks in England. People who wish to see animals in their natural state will love a trip to the safari.

However, sometimes you may want a different effect whereby the image floats, yet the surrounding content do NOT wrap around the image. This can be accomplished through the familiar "float" attribute, combined with "margins", while taking into account IE'6 dreadful "3px text-jog bug". The result is:

The CSS:

Code Info

Rate this code:

Date Posted: 05/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (71)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

I can't get the html code to work...it just shows everything instead of being able to hover!!! HELP!!! concerts in Los Angeles

Posted by LA concerts on 04/17, 04:18 AM

I solved this problem in a manner most people wouldn't try, but is actually very easy to apply (I rhyme like gangsta). I simply added display: table-cell in CSS to the div containing the text on the right. However, I'm not sure of it's cross-browser compatibility.

Posted by récupération de données on 04/17, 05:35 AM

I must admit that this is one great insight. It surely gives a company the opportunity to get in on the ground floor and really take part in creating something special and tailored to their needs. bikini

Posted by swimwear on 04/19, 01:39 AM

I just couldnt leave your website before saying that I really enjoyed the quality information you offer to your visitors… Will be back often to check up on new stuff you post here!

Posted by Digital Printing Vancouver on 04/30, 02:40 AM

Thank you for the sensible critique. Me & my neighbour were preparing to do some research about that. We got a good book on that matter from our local library and most books where not as influensive as your information. I am very glad to see such information which I was searching for a long time.This made very glad
hgh products reviews

Posted by hgh enhancers on 05/08, 06:54 AM

Hi,
What ever may be your business interest, it needs genius marketing strategies to make it successful. The online business too needs the same strategy with much more concentration as internet is the host for your competitors too. You need to adopt compellin..
Search engine marketing

Posted by Search engine marketing on 05/12, 06:56 AM

Posted by Search engine marketing on 05/12, 06:58 AM

`Wonderful information! Thanks for sharing!

Visit one of my sites below and hope you can find some useful information for printing services!

Toronto Printing Companies | Vancouver Printing | Chicago Printing | New York Printing

Posted by printing directory on 05/12, 07:50 AM

Thank's for the idea

I'll use it in my blog

http://non-surgical-facelift.blogspot.com/

Posted by Robbie on 05/14, 10:27 AM

I love the first example.

Conserve more space

non surgical facelift

Posted by Katie on 05/14, 10:30 AM

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

Commenting is not available in this weblog entry.