div won't float left

[gib65]

Hello,

I have a website at http://www.shahspace.com/nuts_and_bolts/home.html.

I have three divs: One parent div and two child divs. One child div contains the picture of the book you see at the link, and the second contains text (I colored it read just to make it more visible).

Why does the second child div (colored red) insist on being shoved to the left edge of the parent div (behind the picture div)? How can I get it to sit just right of the picture div? If it's a problem with the width the content, how can I get the content to wrap around and expand the height of the div?

Here's the code:

<div class="standard" style="border: #000 solid 1px; padding-bottom: 15px; overflow: auto;">

	<div style="float: left; border: #000 solid 1px;">
		<img src="book.jpg" border=0>
	</div>

	<div style="float: right; text-align: left; padding-bottom: 15px; padding-left: 5px; border: #000 solid 1px; background-color: red;">
		<span style="font-family: plantagenet cherokee; font-size: 18pt; color: #880000;">The Nuts and Bolts of Consciousness
<br>
		<span style="font-size: 12pt; padding-left: 200px;">by</span>
		<span style="font-size: 14pt;">Gibran Shah</span>
		</span>

		<br>
		<br>
		
		<span style="font-family: plantagenet cherokee; font-size: 10pt;">
<i>“Both the philosophically minded and those that have any interest in the mind-matter relationship 
will find themselves fascinated with the theory advanced in this well-conceived book.”</i><br>
-Cathy Reyes, Lawyer<br>
<br>
<i>“The most insightful and compelling ideas are generated by those following a path they are
passionate about. The Nuts and Bolts of Consciousness is the result of a relentless passion for the
search for a solution to the mind and matter problem.”</i><br>
-Darren Hamilton, Philosopher, Lawyer, Psychologist, Computer Scientist
		</span>
	</div>
</div>

[coothead]

Hi there gib65,

the div element requires a width value of 542px.

At present it has a default value of 100%, which, as it is within a containing div element, equates to 775px.

The div element containing the the img element has a total width of 226px.

Subtracting 226px from 775px gives 549px, from which a further 7px - (padding and border values) - needs
to be subtracted, giving the final width value of 542px.

coothead

[gib65]

Oh I see. I assumed it would float left and take up the remaining width. But setting it to 542px worked. Thanks coothead.

[coothead]

No problem, you're very welcome.

coothead

[jimiimpact]

Try this code

<div class="standard" style="border: #000 solid 1px; padding-bottom: 15px; overflow: auto;">






<div style="float: right; text-align: left; padding-bottom: 15px; padding-left: 5px; border: #000 solid 1px; background-color: red;">
<img border="0" src="book.jpg" style="float: left; border: #000 solid 1px;">
<span style="font-family: plantagenet cherokee; font-size: 18pt; color: #880000;">The Nuts and Bolts of Consciousness
<br>
<span style="font-size: 12pt; padding-left: 200px;">by</span>
<span style="font-size: 14pt;">Gibran Shah</span>
</span>

<br>
<br>

<span style="font-family: plantagenet cherokee; font-size: 10pt;">
<i>�Both the philosophically minded and those that have any interest in the mind-matter relationship
will find themselves fascinated with the theory advanced in this well-conceived book.�</i><br>
-Cathy Reyes, Lawyer<br>
<br>
<i>�The most insightful and compelling ideas are generated by those following a path they are
passionate about. The Nuts and Bolts of Consciousness is the result of a relentless passion for the
search for a solution to the mind and matter problem.�</i><br>
-Darren Hamilton, Philosopher, Lawyer, Psychologist, Computer Scientist
</span>
</div>
</div>

[keyboard]

Please use the forum's bbcode tags to make your post more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] <!-- markup goes here -->.....[/html]
for js/css/other.......[code] code goes here................[/code]