Two Div Containers with Auto Height running into each other on Firefox and Safari

I am having a strange issue with the Firefox and Safari browser. I have two containers, with multiple divs nested inside, with dynamic data. So logically, I had to set both container divs to auto height. This renders perfectly in IE 6 + 7, but in Firefox and Safari, they run into each other... meaning the top of the bottom div container is pushed into the top container div and shifted to the right. The two container divs are "pcontainer" and "ptabs".

Here is the code:

First, the CSS:

#pcontainer {
      width: 600px;
      margin-top: 20px;
      margin-right: 50px;
      margin-bottom: 20px;
      margin-left: 50px;
      height: auto;
}
#ptabs {
      width: 600px;
      text-align: left;
      margin-right: auto;
      margin-left: auto;
      border: 1px solid #333333;
      height: auto;
}


And the divs:

<div id="pcontainer">
                 <div id="plogo"><img src="images/PS_Images/Brands/<?php echo $row_rsbrands['BrandLogo']; ?>" /></div>
                      <div id="pname"><?php echo $row_rsproducts['ProductName']; ?><br /><?php echo $row_rsproducts['ShortDesc']; ?></div>
                       <div id="pimg"><a href='images/PS_Images/Main/<?php echo $row_rsproducts['IMGxlarge']; ?>' class='lightview'>
                    <img src="images/PS_Images/Main/<?php echo $row_rsproducts['IMGlarge']; ?>" alt="<?php echo $row_rsproducts['ProductName']; ?>" border="0"/></a><br /><br />
                    <a href='images/PS_Images/Main/<?php echo $row_rsproducts['IMGxlarge']; ?>' class='lightview'>View Larger Image</a></div>
                     <div id="pprice"><?php echo $row_rsproducts['Price']; ?><br /><br /><img src="images/PS_Images/SCart.jpg" alt="Add To Cart" /></div>
</div>
<br />
<div id="ptabs">
                <div><script type="text/javascript" src="data.js"></script></div>
               <div id="content1" style="visibility: hidden;"><?php echo $row_rsproducts['Overview']; ?></div>
               <div id="content2" style="visibility: hidden;"><ul type="square"><?php echo $row_rsproducts['Specs']; ?></ul></div>
                <div id="content3" style="visibility: hidden;"></div>
</div>
     



Your help is greatly appreciated.

Thank You.
SilverRain5Asked:
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.

Eoin OSullivanConsultantCommented:
Your description is not very clear

The DIVs appear as designed in Safari
The pcontainer div is 50px from the left whereas the the ptabs div is properly centrally aligned using the margin-left and margin-right: auto

I added a colour to each DIV to show their appearance.

A few things of note
1. You have no height or width dimensions in the images which make it harder to work out what your code is trying to achieve.  This also makes it harder to see why the height of the divs may not be working out properly.
2. All the enclosed DIVs could have styles too .. you'd need to include this to give us a better idea of the display problem
3. Have you added      position:relative;      properties to the 2 DIVs and a    clear: both;      to the top pcontainer div
Picture-1.png
0
SilverRain5Author Commented:
Forgive me, Included is the remaining styles for the nested divs. I also changed the "pcontainer" to have auto margins on the left and right to center it.
#pcontainer {
	width: 600px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	height: auto;
}
#plogo {
	height: auto;
}
#pimg {
	float: left;
	height: auto;
	width: 400px;
	font-size: 10px;
}
 
#pprice {
	float: right;
	height: auto;
	width: 150px;
	margin-top: 10px;
	font-size: 21px;
	color: #0066CC;
	font-weight: bold;
}
#pname {
	font-size: 21px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #003863;
	padding-left: 10px;
	height: auto;
	margin-top: 30px;
	text-align: left;
	margin-bottom: 30px;
}
#ptabs {
	width: 600px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #333333;
	height: auto;
}
#content1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 17px;
	width: 540px;
	list-style-type: square;
	margin-top: 50px;
	margin-right: 30px;
	margin-bottom: 50px;
	margin-left: 30px;
	line-height: 25px;
	height: auto;
}
#content2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 17px;
	width: 540px;
	list-style-type: square;
	margin-top: 50px;
	margin-right: 30px;
	margin-bottom: 50px;
	margin-left: 30px;
	line-height: 25px;
	height: auto;
}
#content3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 17px;
	width: 540px;
	list-style-type: square;
	margin-top: 50px;
	margin-right: 30px;
	margin-bottom: 50px;
	margin-left: 30px;
	height: auto;
}

Open in new window

0
Eoin OSullivanConsultantCommented:
Again .. I am having problems viewing the error .. can you provide a screenshot?
You seem to have gone overboard on the height:auto; property for all the divs .. this is NOT usually required as the height:auto is usually assumed.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

SilverRain5Author Commented:
eoinsullivan,

Thanks again for your reply. I replaced all the pixel heights with auto just to make sure that this was not a required measure to get Firefox and Safari to work.

Attached is the snapshot.
sfxbug.jpg
0
Eoin OSullivanConsultantCommented:
OK .. I've made quite a few changes... see below

1. I added an outer DIV (#holderbox) to hold the #pcontainer & #ptabs DIVs.  This allows you to set the width and alignment for just one div and the others inside now are restricted to this box.  This stops the #ptabs DIV from moving to the right and sliding upwards.

2. Because you are using float: left and float: right for image and price DIVs these are a bit like position: absolute properties insofar as they are usually not counted properly in terms of calculating the overall height of the DIV.  You had tried a <BR> tag to try and force a gap between the bottom of #pcontainer and #ptabs .. this will not work .. instead you'll see I have created a DIV with a class of cleardiv, this helps to clear the DIV above and allows ptabs to appear at the bottom of the box.

3. The principle of CSS ... is the Cascading part ... whereby you set properties that apply to all nested DIVs in the topmost DIV.  You had a lot of unnecessary properties .. such as repeated font, alignment and size declarations. Where possible I have removed them and moved them to a higher DIV for ease of management.

4. There are a few other HTML coding issues
a) You've used <ul type="square">Specs</ul> .. this is incorrect as it should be <ul type="square"><li>Specs</li></ul> or you could use the <DT><DD> tags for indenting also
b) <div id="content3"> had a style set to visibility=hidden ... preferably you should set this in the CSS above UNLESS for some reason you are trying to override a style imposed above at runtime using PHP.  Same goes for the <ul type="square"> which you had set in the CSS

5. I have added border properties to all the main DIVs so I can see what is going on .. once you are happy that the boxes are appearing as desired you can delete these.

Regards

Eoin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
#holderbox {
    position: relative;
    width: 600px;
    margin: 20px auto 20px auto;
    text-align: left;
  	border: 1px solid red;/* Remove the border when testing complete*/
	
}
#pcontainer {
	position: relative;
	clear: both;
	width: 100%;
  	border: 1px solid #333333;/* Remove the border when testing complete*/
}
#plogo {}
#pimg {
    float: left;
    width: 400px;
	border: 1px solid #333333;/* Remove the border when testing complete*/
}
 
#pprice {
        float: right;
        width: 150px;
        margin-top: 10px;
        font-size: 21px;
        color: #0066CC;
        font-weight: bold;
		border: 1px solid #333333;/* Remove the border when testing complete*/
}
#pname {
        font-size: 21px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #003863;
        padding-left: 10px;
        margin-top: 30px;
        margin-bottom: 30px;
}
.cleardiv {
	width: 100%;
	clear:both;
}
#ptabs {
    position: relative;
    width: 100%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 25px;
	border: 1px solid #333333;/* Remove the border when testing complete*/
}
#content1 {
        width: 540px;
        margin-top: 50px;
        margin-right: 30px;
        margin-bottom: 50px;
        margin-left: 30px;
		border: 1px solid #333333;/* Remove the border when testing complete*/
}
#content2 {
        width: 540px;
        margin-top: 50px;
        margin-right: 30px;
        margin-bottom: 50px;
        margin-left: 30px;
		border: 1px solid #333333;/* Remove the border when testing complete*/
}
#content3 {
        width: 540px;
        margin-top: 50px;
        margin-right: 30px;
        margin-bottom: 50px;
        margin-left: 30px;
	        border: 1px solid #333333;/* Remove the border when testing complete*/
}
</style>
</head>
 
<body>
 
 
<div id="holderbox">
	<div id="pcontainer">
		<div id="plogo"><img src="" /></div>
		<div id="pname">Name<br />Desc</div>
		<div id="pimg"><a href='' class='lightview'>
			<img src="" alt="Name" border="0"/></a><br /><br />
			<a href='' class='lightview'>View Larger Image</a></div>
		<div id="pprice">Price<br /><br /><img src="images/PS_Images/SCart.jpg" alt="Add To Cart" /></div>
	</div>
	<div class="cleardiv"></div>
	<div id="ptabs">
		<div><script type="text/javascript" src="data.js"></script></div>
		<div id="content1">Overview</div>
		<div id="content2"><ul type="square"><li>Specs</li></ul></div>
		<div id="content3">Other</div>
	</div>
</div>
 
</body>
</html>

Open in new window

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
biXenCommented:
If I understand you correctly on how you tried to use height: auto; I can say that it doesn't really work that way. You can't automatically expand floating content in height unless the content itself pushes it, if you go by standard coding.
0
SilverRain5Author Commented:
The cleardiv turned out to be the missing piece.
Thank You very much for your help.
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
Web Browsers

From novice to tech pro — start learning today.