CSS Div image overflow corss browser issue

I'm having a Firefox / IE div display issue.

Refer to this test page:
http://www.keithhopkin.com/test/divtest.htm

Each one of these examples uses a floating image inside of a div container that has a background color.
In Firefox the container only grows as far as how much text is in it. In IE it looks fine. I could've sworn that last night I was looking at this on Firefox on a different machine and it looked fine (can't recall the version #).

I included screenshots of what I am seeing below the actual code. I feel like this has alwyas been a hit or miss thing and I come across this problem fairly frequently.

Thanks in advance!


FF 2.0.0.3
IE 6.0.2900

<style>
#container1 {
      background-color:#999999;
      clear:both;
      margin:10px;
      width:100%;

}
#image1 {
      float:left;
}
#text1 { };
#container2 {
      background-color:#999999;
}
#image2 {
      float:left;
}
#text2 {
}
</style>



<div id="container1">
      <div id="image1"><img src="tree.jpg"></div>
      <div id="text1">This is the text that should appear next to the image</div>

</div>

<div id="container2">
      <div id="image2"><img src="tree.jpg"></div>
      <div id="text2">This is the text that should appear next to the image</div>
</div>

kenitechAsked:
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.

fuzzboxerCommented:
Remove the "float:left;" from #image1.
0
kenitechAuthor Commented:
This will make the container div conform to the size of the image but then the text div 'clears' to the following line. I must be mssing something really fundamental here?

Here is example 2 with the float removed from #image1
http://www.keithhopkin.com/test/divtest2.htm
0
fuzzboxerCommented:
<style>
#container1 {
      background-color:#999999;
}
#container1 p{
      margin-top:0px;
      display:inline;
      vertical-align:top;
}
</style>


<div id="container1">
<img src="images/faculty/Bruce_Kim.jpg">
<p>This is the text that should appear next to the image</p>
</div>

That should be all that you need to make it work.
0

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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

kenitechAuthor Commented:
Yeah! That does it. So, no need to float and display:inline. I wasted too much time trying to resolve that on my own. It's definitely a common layout but for some reason I have been unable to find a clear example of it in use.

Here is the final version with fuxxboxer's cdd:
http://www.keithhopkin.com/test/divtest3.htm
0
kenitechAuthor Commented:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22494646.html?cid=239


Hey, I'm not sure this is totally resolved. As soon as I add any text formatting like a line break, the text then jumps under the image.
Please see
http://www.keithhopkin.com/test/divtest4.htm

Sorry, can I still post this here?
0
fuzzboxerCommented:
I think you need to create a new question.  I'm not sure, though.
0
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
CSS

From novice to tech pro — start learning today.