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:
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 »
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>
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...
Simple solution:
p {display:table; height:1%}