Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

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:

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.

The CSS:

The HTML:

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 1 of 7 pages  1 2 3 >  Last »

It's not very useful, because if you dont't have image it's still left free space.

Simple solution:
p {display:table; height:1%}
Posted by Robinzon on 06/09, 03:23 AM
I didn't know how to do that, believe me I had a few moments with the surrounding text wrap to the image, now I know how to solve it. Thanks
Posted by Roberto on 07/12, 08:21 PM
//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
flyimage1=new Chip("flyimage1",47,68);
flyimage2=new Chip("flyimage2",47,68);
flyimage3=new Chip("flyimage3",47,68);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>
Posted by aungkosan on 08/15, 08:07 AM
I hope it works on all the browsers.. because when i tried using my brain and skills.. their were some problems with IE and FF.
Posted by seo help on 09/12, 04:42 PM
I'm trying to do this in DotNetNuke in the Text/HTML module. I enter the style inline but still no floating effect. I'm trying to get a horizontal floating effect but the text just skips the entire div section. ahhh!
Posted by colon cleansing on 09/16, 06:50 PM
Couldn't you just float the image to the left and float the text to the right and just contain both within a div?

HTML:

<div class="example">

images/example.gif


Text goes here, doesn't it?


</div>

CSS:

div.example {
/*Whatever you want goes here*/
}

.left {
float: left;
}

.right {
float: right;
}


P.S. If this doesn't work, it would be because I'm too tired to really give it any thought...
Posted by Krazy3 on 10/01, 04:02 PM
I was looking for something like this, I guess is easy for most advanced developers, but I don't have quite experience, so it works fine for me and my site.
Posted by cibarra on 10/18, 05:05 PM
@Krazy3: Your idea works, prefer it because of the simplicity. Thanks :)
Posted by Ed on 12/12, 06:03 PM
It's very useful!
Posted by Beatbox on 12/22, 10:04 AM
Your idea works, prefer it because of the simplicity. I tried it.
Posted by Download Soft on 04/02, 04:39 PM

Comment Pages 1 of 7 pages  1 2 3 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.