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 2 of 7 pages < 1 2 3 4 > Last »
<img src='image.png' alt='some text' style='display: inline; float: left; padding: 3px' />
And it works perfectly fine. Or maybe I didn't understand what this is supposed to be. :)
Also added a textbox on the top of the page, to act as a header. Need to have entry (Form) code. Is this possible in css? New to css and am analyzing as I learn.
Will be happy to share my code. By the way, I was having a problem with wrapping the text within the box I created. Used float: left; to make the wrap happen.
Appreciate any suggestions. Thanks
Tom Kennedy
<p><%=txtDescription%>static text</p>
The static text the otherhand works OK, but I need to use a variable.
Style.css
.imagebox {
border-left: 1px; border-right: 1px; border-bottom: 1px; border-top: 1px;
width: 300px;
height: 300px;
}
.thumbnail_left {
width: 100px;
heigh: 100px;
float: left;
margin-left: 3px;
}
Index.html
<div id="imagebox">
image_location.gif
</div>
That will do everything that is given above.