Prevent div text from wrapping around floating element

In the following code, how do I prevent the entire DIV from dropping underneath the images when the bullet point text needs to wrap to the next line?

Everything displays okay in IE.  In FF, everything is good until the line of text in the bullet point gets too long.  When that happens, the WHOLE list div drops underneath the images div.  What I require is that the div's sit alongside each other.  I have a variable amount of images that may appear in the left div, so cannot hard-code width properties into either.

div.myDiv {border:1px solid #555555; padding: 3px; margin:3px; width:95%}
div.myDiv img {margin:5px; border:1px solid #000000; height:75px;}
div.myDiv ul {list-style-position: inside; margin:0px; padding:0px}

<div class="myDiv">

  <strong>Product Title</strong>

  <div style="height:90px; padding:0px; float:left;">
    <img src="aaa.jpg" /><img src="bbb.jpg" />

 <div style="float:left;">   <!--  <--- Adding float:left here corrects the problem is IE but not in FF -->
     <li>Product description here Product description here Product description here Product description here Product description here </li>
     <li>Product description here Product description here Product description here Product description here Product description here </li>

 <div style="clear: both;">&nbsp;</div>

LVL 25
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Well you either contraint it by applying a width or you shorten the text so it does not get too long.  The browser cannot read your mind.  If you do not specify a width it defaults to 100%


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RouchieAuthor Commented:
That works well.  I was presuming that the second div would automatically resize to fit the available space left after the images were placed.
No all the block element default to 100% of their parent for width and height auto.  The auto meaning that athey will adjust height to that of the content.

Glad I could help.  Thanks for the A. :^)


It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.