Need text box to float left beside image

[eggheadbooks1]

I need a block of text to display to the right of a picture and not disconnect as the user changes the font size. I have tried a floating borderless frame but the problem is that while it looks great half the time (see ADE1.jpg), if the font is not just the right size I get this (see ADE2.jpg).

I tried putting the text inside a larger borderless frame along with the image, but cannot seem to get the text to float to the left of the image.

Any help would be appreciated.

The current code is this:

CSS:

div.FrameSmall{
border:0px;
padding:5px 5px 5px 5px;
float:left;
width:25%;
margin: 10px 10px 10px 0px;
}

HTML:

<div class="FrameSmall"><img alt="15.1methane" width="100%" src="../Images/15.1methane.jpg" /></div>

<p class="First6" style="margin-right:2.5em">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>

Michelle

P.S Jellby: Hope you're around. You're good at this!

P.P.S. In my original post I accidentally wrote "left" instead of "right." My bad.

[roger64]

Hi,

After float:left, I would add: clear:left.

[Turtle91]

Originally Posted by roger64

Hi,

After float:left, I would add: clear:left.

The smaller font allows the 2nd float to be beside the first, if you add clear:left it forces it to the next line.

[eggheadbooks1]

Hi Turtle:

So, are you saying Roger64's solution will not work? In which case, do you have any suggestions of what might work? I'm at a loss.


Michelle

[Tex2002ans]

Originally Posted by eggheadbooks1

So, are you saying Roger64's solution will not work? In which case, do you have any suggestions of what might work? I'm at a loss.

I believe Turtle91 was just specifying what "clear" does.

Originally Posted by eggheadbooks1

The current code is this:
CSS:

div.FrameSmall{
border:0px;
padding:5px 5px 5px 5px;
float:left;
width:25%;
margin: 10px 10px 10px 0px;
}

HTML:

<div class="FrameSmall"><img alt="15.1methane" width="100%" src="../Images/15.1methane.jpg" /></div>

<p class="First6" style="margin-right:2.5em">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>

I wanted to let you know that instead of using the "Quote" system for code, you should use the CODE tag. In the MobileRead editor, the button looks like a '#'.

Also, I just wanted to inquire about one thing.

Any specific reason you are using JPG for these chemistry diagrams instead of PNG? Artificial images with very few colors are RIPE for PNG Indexing (giving you MUCH smaller file sizes).

[eggheadbooks1]

Any specific reason you are using JPG for these chemistry diagrams instead of PNG? Artificial images with very few colors are RIPE for PNG Indexing (giving you MUCH smaller file sizes).

Because jpegs were sent to me by the client, and because the ePub will be converted to Kindle as well and in the past they handled PNGs badly (sometimes converting backgrounds to black). Perhaps that has changed?

Michelle

[Turtle91]

Originally Posted by eggheadbooks1

Hi Turtle:

So, are you saying Roger64's solution will not work? In which case, do you have any suggestions of what might work? I'm at a loss.
Michelle

It WILL work...I was just clarifying why you were having the problem and what the clear would do.

[Tex2002ans]

Originally Posted by eggheadbooks1

Because jpegs were sent to me by the client, and because the ePub will be converted to Kindle as well and in the past they handled PNGs badly (sometimes converting backgrounds to black). Perhaps that has changed?

To my knowledge KindleGen only generates black backgrounds when the PNGs use transparency. As long as you stay away from transparency in your PNGs you should be A-ok.

Bloated JPGs are just one of my little pet peeves. I just hate EPUBs that are overly large!

Especially when you have many diagrams, all those KBs really begin to add up!

Originally Posted by roger64

After float:left, I would add: clear:left.

Originally Posted by Turtle91

The smaller font allows the 2nd float to be beside the first, if you add clear:left it forces it to the next line.

I will definitely have to keep this in mind in the future. This would be very helpful in a few books I have worked on with lots of floats.

[eggheadbooks1]

Clear:left doesn't work.

If I place the text within the frame to keep it connected to the image, the text still falls below the image. If I place the text outside the image, "clear:left" keeps the two images from overlapping (see OP second jpeg) BUT I still cannot get the text to stay connected to the image. I need the second image always to sit beside "Carbon can also share..." even if it means a large white space between it and the preceding paragraph/image combo (I can always make the image smaller, in an average-text-size sort of guess).

Any ideas anyone?

Michelle

[eggheadbooks1]

Sorry, here is screen shot from "clear:left". You can see that the text is not in alignment with the images as I need it to be.

Michelle

[eggheadbooks1]

Sorry, forgot to hit the upload button. It's been that kind of day...

[eggheadbooks1]

This is as far I seem to be able to get (see jpeg). The CSS is:

div.FrameSmall{
	border:0px;
	padding:5px 5px 5px 5px;
	float:left;
	width:100%;
	margin: 10px 10px 10px 0px;

And the HTML:

<div class="FrameSmall">
    <img alt="15.1methane" src="../Images/15.1methane.jpg" width="20%" />

    <p class="First6" style="margin-right:2.5em">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

Or this (it makes no difference to the results):

 <div class="FrameSmall">
    <img alt="15.2ethane" src="../Images/15.2ethane.jpg" width="20%" />
    <div>

      <p class="First6" style="margin-right:2.5em">Carbon can also share a single electron pair with another carbon atom, with hydrogen providing the remaining three available bonds. In such a case, the resulting compound is ethane (C<sub>2</sub>H<sub>6</sub>), which is depicted on the left.</p>

Any ideas? Anyone?

Michelle

[Turtle91]

I don't see where you added the clear:left??

This should work:

div.FrameSmall {clear:left; width:100%}
div.Float-L {float:left; margin:5px}

<div class="FrameSmall">
<div class="Float-L"><img alt="" src="../Images/Methane15-1.jpg" /></div>
<p class="First6">......</p>
</div>

<div class="FrameSmall">
<div class="Float-L"><img alt="" src="../Images/Ethane15-2.jpg" /></div>
<p class="First6">......</p>
</div>

A couple things:
Wrap the image in its own div.
You don't need the file name in the alt tag. It is supposed to be descriptive text that shows up if the image is missing, or is read aloud by Text-to-Speach software. If you don't have descriptive text, then leave it blank.
Change the file names of your images so they don't start with a number; and I would use a dash or underscore instead of a period between the numbers.
Put the style for your text in the "First6" definition in the CSS...that's what it's for.

And IMO, I would shrink the size of the images for methane and ethane a bit...they overpower the text a tad...as well as make them a .png like was mentioned before. It will save a ton of space if you have a lot of them.

Cheers!

[eggheadbooks1]

Hi Turtle:

I had taken out the clear:left because it wasn't working.

I tried the code you sent on the first image -- and thank you much for your help so far -- and I can now get the text to sit to the right of the image, but the space between the image and text is so large that when viewed in a typical ereader the effect is the same as no code: the text goes to the next line.

I have attached a screen shot of the effect of your code when viewed in Sigil (which I am using) and the effect when viewed in ADE.

Michelle

[Turtle91]

It looks like you have a huge margin somewhere...either to the right on the <div class="Float-L"> or to the left on the <p class="First6">. Can you post the current CSS and HTML that gave you the result in your image - including the CSS for "First6"?