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
Solved

CSS Div image overflow corss browser issue

Posted on 2007-04-05
6
918 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
  • 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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
Wrapper for APPs 9 85
How to make footer stick to bottom 9 37
CSS: How do I override in-line styling 11 26
Easy css question moving title underneath an image 4 16
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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