Solved

CSS Div image overflow corss browser issue

Posted on 2007-04-05
6
932 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
Technology Partners: 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 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