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!