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...
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...
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?