View Single Post
Old 05-07-2013, 03:32 AM   #1
BruceWDarby
Junior Member
BruceWDarby began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Mar 2013
Device: Toshiba Thrive
Placing div's side by side

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?
Attached Thumbnails
Click image for larger version

Name:	FloatError.PNG
Views:	199
Size:	44.4 KB
ID:	105506  

Last edited by BruceWDarby; 05-07-2013 at 08:47 AM. Reason: Edited to remove 'middle' from div float...
BruceWDarby is offline   Reply With Quote