MobileRead Forums - View Single Post - problem with floating image and relative width

AlexBell · 11-23-2012, 11:46 PM

For what it is worth here is what I use to float text round a drop cap image:

CSS
div.illustrationL {
margin: 0; padding: 0 0.25em 0 0;
/* border: 1px solid black; */
width: 33%;
float: left;
}
div.illustrationL img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
} /* With thanks to Elizabeth Castro */

HTML
<div class="illustrationL">
<img src="images/ch01cap.jpg"
alt="alt text"/>
</div>

It works and validates, and is taken from Elizabeth Castro's HTML, XHTML, and CSS from Peach Pit Press.

11-23-2012, 11:46 PM	#2
AlexBell Wizard Posts: 3,413 Karma: 13369310 Join Date: May 2008 Location: Launceston, Tasmania Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet	For what it is worth here is what I use to float text round a drop cap image: CSS div.illustrationL { margin: 0; padding: 0 0.25em 0 0; /* border: 1px solid black; / width: 33%; float: left; } div.illustrationL img { border: 0; margin: 0; padding: 0; width: 100%; display: inline; } / With thanks to Elizabeth Castro / HTML <div class="illustrationL"> <img src="images/ch01cap.jpg" alt="alt text"/> </div> It works and validates, and is taken from Elizabeth Castro's HTML, XHTML, and CSS* from Peach Pit Press.