SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Column Layout - Gap b/n content and Footer

    Hi,

    I was just trying a 2 col layout based on CSS Mastery on Webreference (changing few lines without touching skeleton) and it is displaying perfect in Firefox and Opera but IE 6.0 is not happy about it.

    I can see a gap between the "content area and footer" or navigation and footer" whichever is the longest coulmn.

    Can anybody please help me? Code below:

    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>2 Column Centered Layout</title>
    <style>

    body {
    min-width: 760px;
    }
    #branding h1 {
    padding: 10px;
    }

    #wrapper {
    width: 720px;
    margin: 0 auto;
    border: 1px solid #000;
    background: #fafafa;
    }

    #content {
    width: 520px;
    float: right;
    background: #dedede;
    }

    #content h1, h2, h3, p {
    padding: 10px 20px;
    margin: 0;
    }

    #mainNav {
    width: 180px;
    float: left;
    background: #888
    }

    #mainNav h3 {
    padding: 10px 20px;
    margin: 0;
    }

    #footer {
    clear: both;
    background: #555;
    color: #ddd;
    border-top: 1px solid #000;
    }

    #footer h4 {
    margin: 0;
    padding: 10px 20px;
    }

    </style>
    </head>

    <body>
    <div id="wrapper">
    <div id="branding">
    <h1>Simple Two Column Layout </h1>
    </div>
    <div id="content">
    <h3>Content area</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sem purus, venenatis eu, bibendum vel, elementum sed, mauris. Phasellus vitae justo vel ante eleifend pretium. Proin mattis ante id dui. Vestibulum faucibus, sapien at hendrerit suscipit, felis magna sodales diam, vel tempus nibh nisi eget justo. Vestibulum cursus nisi vel nunc. Pellentesque tincidunt. Phasellus non sapien in leo ultricies imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sit amet ligula vitae dolor consectetuer rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut mollis venenatis lacus. Curabitur pellentesque. Curabitur lacinia vestibulum quam. Mauris iaculis sapien id risus. Quisque imperdiet justo in justo. Phasellus vitae sapien. Quisque leo. Vivamus fermentum, sem et pharetra cursus, eros urna eleifend lectus, tempus sodales est erat vel dui. Vestibulum gravida, augue eget viverra sodales, purus metus tempus leo, in tempus turpis enim eu massa. </p>

    <p>Nam magna. Vivamus massa erat, commodo a, ullamcorper pellentesque, vestibulum ac, ipsum. Praesent tempus felis sit amet orci. Aliquam scelerisque, tortor ut luctus aliquam, sem leo hendrerit sem, quis mattis arcu libero non nisl. Sed in dui vel neque lacinia porttitor. Donec velit enim, lacinia at, iaculis non, viverra nec, arcu. Curabitur non risus vitae mi tristique fringilla. Vestibulum adipiscing, ante eget commodo faucibus, risus quam tincidunt ante, non mollis erat lacus et tortor. Maecenas odio urna, tincidunt in, vulputate vel, congue eu, tellus. Sed imperdiet porttitor leo. Nam vulputate leo sit amet ligula.</p>
    </div>
    <div id="mainNav">
    <h3>Left Navigation</h3>
    <p>Vivamus massa erat, commodo a, ullamcorper pellentesque, vestibulum ac, ipsum. Praesent tempus felis sit amet orci. Aliquam scelerisque, tortor ut luctus aliquam, sem leo hendrerit sem, quis mattis arcu libero non nisl. Sed in dui vel neque lacinia porttitor. Donec velit enim, lacinia at, iaculis non, viverra nec, arcu.</p>
    </div>
    <div id="footer"> <h4>This is Footer</h4></div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!

    It worked

    Thanks

  3. #3
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 - margin: auto;

    Hey! please check the above code.

    According the article, CSS Mastery: Page Layout, IE 6.0 doesn't accept margin: auto in quirks mode.

    But when I see my page in IE 6, I could find that it's working fine without those hacks too.

    Can anybody tell me please under which condition IE 6 will go in quirk mode?

    Please check the code above

  4. #4
    SitePoint Addict GonzaloGM's Avatar
    Join Date
    May 2007
    Location
    Rosario, Argentina
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you don't have a proper doctype.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Can anybody tell me please under which condition IE 6 will go in quirk mode?
    IE6 will go into quirks mode if you use an incorrect doctype, or if you use the html4.01 transitional doctype without the URI part. It will also go into quirks mode if there is any other code or characters, (comment tags etc ) above the doctype such as the xml declaration.

    More info here:

  6. #6
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    The explanation was great. Link to Eric Meyer's site was too helpful.


Bookmarks

Posting Permissions

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