Placing div's side by side

[BruceWDarby]

Hi there ladies and gents,

Have been doing a bit of work trying to learn how to create an ebook. Using a .pdf of one of my Dummies books and trying to make it look as close to the original as I can. Have searched far and wide to find an answer to this particular issue I'm having in trying to place the caption text in a div next to the actual graphic that the caption is for. Below is my html code...

<div>
    <div class="figuretext"><span style="font-family: 'Arial Bold'">Figure 1-1</span>: CSS files can be managed within Microsoft’s Visual Studio.
    </div>

    <div class="graphicbox">
      <p><img alt="" src="../Images/Figure01-01.png" /></p>
    </div>
    <div style="clear: both"></div>
  </div>

And this is the CSS code...

.graphicbox {
	float: right;
	margin-left: 13%;
	margin-top: 0em;
	border: 1px solid black;
	}
.figuretext {
	float: left;
	font-family: 'Arial Regular';
	font-size: .75em;	
	text-align: right;
	border: 1px solid black;
	margin-right: 88%;
	margin-top: 4em;
	}

From all the research I've done on this subject, the two div's should be happily coexisting side by side. The problem is they are not. I have floated a graphic to the left of a paragraph of text without issue, but as you can see from the temporary borders I have placed around the div's, the code is 'trying' to do the right thing, but somehow cannot. Anyone have a solution?

[Turtle91]

Check the float tag. there is no option for "middle", only left, right, none, or inherit.

W3Schools Float reference

[BruceWDarby]

Originally Posted by Turtle91

Check the float tag. there is no option for "middle", only left, right, none, or inherit.

W3Schools Float reference

Turtle,

Thanks for that. Was kinda wondering, but did find that reference on one of the CSS sites I visited and thought I'd give it a try. If my graphic is resized down to where it will only fill one-third of its div and floated to the right, the two div's are raised to the same level, but if I increase the size of the graphic to anything over 50% of the div, it drops under the div containing the caption. The same is true if I place the graphic above the caption in the html code. It acts as if the right margin for .figuretext is being ignored by Sigil and the graphic is being forced down as a result.

Thanks for the assist...

[BruceWDarby]

Found the answer. 'Twas the margins in the CSS class's. For some strange reason, Turtle, even though middle is not supported, it does work. Thanks for helping me over the hump.

[Turtle91]

I'm glad you got it working!

I would check to make sure your ePub validates properly. If you have invalid CSS it might display properly in Sigil, but could totally barf on a different display like ADE.

Cheers!

[theducks]

Originally Posted by BruceWDarby

Found the answer. 'Twas the margins in the CSS class's. For some strange reason, Turtle, even though middle is not supported, it does work. Thanks for helping me over the hump.

Do not Depend on something that appears to work in Sigil
Sigil will tolerate more errors (IMHO allowing any non-spec feature is an error) than the Spec allows.

Then you still need to check your work on Devices because DEVICES do not always support all of the EPUB SPEC.

to wit a 50% <hr /> appears as intended in Sigil/ To get it to appear the same with ADE (MRSDK), you need to fake the center by using a margin-left: 25%

Do spend some time reading the stickies at the top of formats forums. It will save a lot of hair pulling/ later.

[gbm]

Originally Posted by theducks

Do not Depend on something that appears to work in Sigil
Sigil will tolerate more errors (IMHO allowing any non-spec feature is an error) than the Spec allows.

Then you still need to check your work on Devices because DEVICES do not always support all of the EPUB SPEC.

to wit a 50% <hr /> appears as intended in Sigil/ To get it to appear the same with ADE (MRSDK), you need to fake the center by using a margin-left: 25%

Do spend some time reading the stickies at the top of formats forums. It will save a lot of hair pulling/ later.

I would start with the Known bugs in ADE

bernie

[BruceWDarby]

If ever I take it upon myself to publish an ebook, I shall very seriously research all area's of this site and any other site that can provide me an inkling of knowledge needed to accomplish said task. For the time being, I am simply trying to convert my technical books to electronic format for my Toshiba Thrive tablet. The learning process is not difficult, but it is complex in knowing what I can or cannot do because certain new technologies are not yet implemented in Sigil or Aldiko or Calibre. Standardization is what is ultimately going to bring me to a point where I would feel the ability to create a work of my own would be worthwhile. But with your gracious help and forbearance, I am happy to be a lurking member, for now.

[exaltedwombat]

If you ever write a book, I hope you never publish a sentence quite as horribly convoluted as the one below:
"If ever I take it upon myself to publish an ebook, I shall very seriously research all area's of this site and any other site that can provide me an inkling of knowledge needed to accomplish said task." :-)

Your Toshiba Thrive is a 10" device I think? This is big enough to read PDFs of full book pages. You might find this a better approach. Epub is great for reading narrative text. It sucks when layout, tabular data etc. need to be retained.

[BruceWDarby]

*sigh* the whole world is a critic! There is no room for eloquence in the world any longer.

Yes, the Thrive is a 10" device, and I even have Adobe Reader on it, but the fun is in not using the de facto 'standard', but in learning new things. I have run into a few walls, but while I am sometimes anal, I can be flexible about my page layout. The fun is in watching the industry grow. As it does so, then items that are currently not considered important will become so and the tools will change to reflect it.

[exaltedwombat]

At the present state of play, the tool for displaying what you want to display, on your device, is PDF.

The silly thing is - the devices people use to read eBooks generally also support a web browser. They can display a page using a much fuller set of HTML and css instructions than epub allows. There's an enormous amount of existing expertise in website design, both liquid and fixed-width formats. Is there ANY excuse for epub and mobi other than DRM?

[BrisChri]

An idea I never tried on ePub's: use "display:table;" in place of "float:left/right;".

An explanation can be find here : http://www.onenaught.com/posts/201/u...ble-for-layout (2009).
Compatibility with browser : http://caniuse.com/css-table
I use the "display:table;" here http://brischri.angelfire.com/bibi.html
- footer : "A propos", "Liens utiles" and "Oh!Bises" are displayed in table.
- That's a copy of another site which explain the capacities of html5 (I can't retrieve the original in english, sorry)

[theducks]

Originally Posted by BrisChri

An idea I never tried on ePub's: use "display:table;" in place of "float:left/right;".

An explanation can be find here : http://www.onenaught.com/posts/201/u...ble-for-layout (2009).
Compatibility with browser : http://caniuse.com/css-table
I use the "display:table;" here http://brischri.angelfire.com/bibi.html
- footer : "A propos", "Liens utiles" and "Oh!Bises" are displayed in table.
- That's a copy of another site which explain the capacities of html5 (I can't retrieve the original in english, sorry)

IMHO Tables are almost as bad as PDF.
They are fine on the bigger screen. but render like dung on many smaller (low pixel width) screens.

[BrisChri]

I agree, on a 10" device and for personnal use (and personnal interest to study and trying), that must be usable.
For professionnal use and distribution, I think that's a bad idea.

[mrmikel]

And tables are NOT rotate-able to take advantage of the longer dimension of the page either. If you have to use an image in order for a table to work, you might as well be using a PDF if the device is big enough. Since I have a PRS-300, images are how I go.

Columns, pull quotes and inset special articles are great too, but not on my small device. If you're making them for yourself, you might as well make them as good as your device allows.

I think there might be another section in the MR library for larger format books that can take advantage of greater size in tablets and the like. But that may be subsumed by the PDF section, since it is dead easy to make a PDF from any document.