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 2 of 2
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    IE7 not agreeing with 2 column layout!

    Solved: Just a position relative, top and left issue (vs padding). I wish I knew how to delete this thread

    Thanks!!
    Last edited by boogily; 05-04-2011 at 03:40 AM.
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe try this "skeleton" header, 2 columns for content, footer layout as a guide. It works in my IE7+.
    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>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    border: 1px solid red;
                    height: auto;
                }
                #header {
                    border: 1px solid blue;
                }
                #content {
                    width: 70%;
                    float: right;
                }
                #content .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
                #sidebar {
                    width: 30%;
                    float: left;
                }
                #sidebar .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                    border: 1px solid green;
                }
                #footer {
                    clear: both;
                    border: 1px solid black;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <h1>HEADER and NAVIGATION BAR</h1>
                </div>
                <div id="content">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>LEFT MAIN CONTENT COLUMN</h1>
                    </div>
                </div>
                <div id="sidebar">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>RIGHT SIDE BAR COLUMN</h1>
                    </div>
                </div>
                <div id="footer">
                    <h1>FOOTER BAR</h1>
                </div>
            </div>
        </body>
    </html>


  •  

    Posting Permissions

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