Solved

CSS Div image overflow corss browser issue

Posted on 2007-04-05
6
926 Views
Last Modified: 2008-01-09
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>

0
Comment
Question by:kenitech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 9

Expert Comment

by:fuzzboxer
ID: 18859168
Remove the "float:left;" from #image1.
0
 

Author Comment

by:kenitech
ID: 18860282
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
 
LVL 9

Accepted Solution

by:
fuzzboxer earned 50 total points
ID: 18860518
<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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kenitech
ID: 18860693
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
 

Author Comment

by:kenitech
ID: 18891400
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
 
LVL 9

Expert Comment

by:fuzzboxer
ID: 18891765
I think you need to create a new question.  I'm not sure, though.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 82
css selector 1 24
ASP.NET Content Page 3 52
Using Specialized Fonts in CSS 1 44
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question