Solved

CSS Div image overflow corss browser issue

Posted on 2007-04-05
6
912 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 74
Error on link 14 48
is this a cms? 8 60
help squeezing some space out in this site 9 33
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
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).

778 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