Hello all 🙂

I am having an issue getting an outer div to expand vertically as an inner div expands. The problem is that it doesn't; if the inner div expands beyond the outer div's height, it just pushes everything down. I have included a screen shot for a visual representation:

http://oi54.tinypic.com/302npzo.jpg

The blue border is just a visual reference for myself, but illustrates the problem perfectly. As one can see, the more text that's in the blue (inner) div the larger it gets, but the grey (outer) div does not expand with it. How can I get both to expand together?

Here is the CSS for the divs:

div.photo
{
	background-color:#111;
	border:1px solid #999;
	border-radius:5px;
	display:block;
	margin-bottom:15px;
	padding:10px;	
	width:990px;
}

div.thumb
{
	color:#999;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;		
	text-align:center;
	width:240px;	
}

div.prices
{
	border:1px solid blue;
	display:inline-block;
	float:right;
	width:740px;	
}

.photo is the grey box
.thumb is the div containing the image and the remove cart link
.prices is the blue div

Implementation:

echo '<div class="photo" id="'.$photos[$x].'">';
	echo '<div class="thumb">';
			echo '<img class="viewcart" src="'.$path.$photos[$x].'" alt="photo" title="Click for a larger view"/>';
			echo '[ <a class="remove" href="#remove" onclick="RemoveCart(\''.$photos[$x].'\');">X</a> ] Remove From Cart';
		echo '</div>';
	echo '<div class="prices">';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
		echo 'This is some test text<br />';
	echo '</div>';
echo '</div>';

Thanks in advance! 🙂

    div .prices is set to float right. Since floating removes the content from the regular content flow, the containing element will not be affected by its height - same as if you used absolute positioning.
    You can however use clear: left | right | both to stop floating at any point.

      Thanks for the reply! I'll check it out and post back when I can. 🙂

        I got it to work and it looks great! Thanks so much! 🙂

          Write a Reply...