Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlapping Side-to-Side DIVs in Chrome and Firefox

    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?
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @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!

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by kuul13 View Post
    @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.

  • #6
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Absolutely right! I will make sure that I remember this! Thanks!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •