Overlapping Side-to-Side DIVs in Chrome and Firefox

kuul13 · 08-05-2009, 05:25 AM

Hi

I am trying to create a personal website and I am not very much into CSS so please bear with me with my questions..

I have web site with two pages (Home and Test) with each page having a structure similar to:
- Header
- Menu
- Content
- Footer
All these sections will/should be DIVs.

The Home page has plain text as content and Test page has two side-to-side div showing different content (eventually i will have two different set of images in these divs).
My issue is that, in Firefox and Google Chrome the two side-to-side divs with in content div are overlapped with footer div. But same page is working well in IE. I have attached my StyleSheet.css file for reference. And the HTML code is as follows:
Home.html
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<div id="subpageheader">
<h1 id="sitename">MY SITE</h1>
</div>

<div id="menu">
<ul>
<li><a href="home.html" class="active">HOME</a></li>
<li><a href="test.html">TEST</a></li>
</ul>
</div>

<div id="content">
<br />
<h3 id="welcome">Welcome to my home page!</h3>
</div>
<div id="footer">
copyright@2009
</div>
</div>
</body>
</html>
[CODE]

Test.html
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<div id="subpageheader">
<h1 id="sitename">MY SITE</h1>
</div>

<div id="menu">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="test.html" class="active">TEST</a></li>
</ul>
</div>

<div id="content">
<div id="rootleftpan">Welcome to my site.. </div>
<div id="rootrightpan">Welcome to my site.. </div>
</div>
<div id="footer">
copyright@2009
</div>
</div>
</body>
</html>
[CODE]

The home.html page looks similar in IE6.0/Firefox/Chrome. But test.html is not as expected. Please help me to understand how i can fix the overlapping issue in Chrome/Firefox. Also, if it will work on IE8.0?

Fisher · 08-05-2009, 06:45 AM

You need to clear your floats. One simple method:

Code:

<div id="content">
    <div id="rootleftpan">Welcome to my site.. </div>
    <div id="rootrightpan">Welcome to my site.. </div>
    <br style="clear:both" />
  </div>

Of course you should put this in your CSS file, not inline.

drhowarddrfine · 08-05-2009, 02:24 PM

As always, this is a bug in IE and Firefox/Chrome are performing properly. Never look at IE as a reference for how things should work.

kuul13 · 08-05-2009, 05:49 PM

@Fisher.. Mind blowing

.. much appreciate your help! It was so simple! I tested my test page and it works great.. will try to implement this on my under construction website. Thanks again!!!

@Drhowarddrfine.. I wish I don't look at IE, but unfortunately we can't get rid of IE.. It is the most used browser in the universe. But thanks for your response!

drhowarddrfine · 08-05-2009, 06:44 PM

Quote:

Originally Posted by kuul13

@Drhowarddrfine.. I wish I don't look at IE, but unfortunately we can't get rid of IE.. It is the most used browser in the universe. But thanks for your response!

That's not the point. The point is to get your code correct first. Then worry about IEs screw ups, not the other way around.

kuul13 · 08-06-2009, 02:19 PM

Absolutely right! I will make sure that I remember this! Thanks!