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 4 of 4

Thread: 3 column layout

  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3 column layout

    When I try this 3 column layout it works fine without the image
    <div style="width:100%"><img src="/images/slider.jpg" /></div> in the content div., but when it's included it pushes the content div down the page in IE (seems to work fine in Opera and FF),
    any ideas?


    <!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=iso-8859-1" />
    <title>Layout</title>
    <style type="text/css">
    body {
    margin: 1px 0 0 0;
    padding:0;
    background-color: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    }

    #topnavigation
    {
    padding: 0;
    margin: 4px 0 14px 0;
    background-image:url("/images/newnavbar.jpg");
    border-color: #8CA5CE;
    text-align:center;
    height:22px;
    }

    #container
    {
    width: 100%;
    margin: 0;
    background-color: #fff;
    position:absolute; top:90px;
    }

    #leftnav
    {
    float: left;
    width: 130px;
    margin: 0;
    padding: 0.3em;
    background:#EEF3FB;
    border:2px solid #8CA5CE;
    }

    #rightnav
    {
    float: right;
    width: 140px;
    margin: 0;
    padding: 1em;
    background:#EEF3FB;
    border:2px solid #8CA5CE;
    }

    #content
    {
    margin-left: 200px;
    margin-right: 200px;
    }

    #base
    {
    padding: 1px;
    margin-left:0;
    padding-left:0;
    list-style-image: url(/images/Button.gif);
    list-style-position: inside;
    }


    img { border:0;}

    </style>
    </head>

    <body>
    <div style="margin:2px;">
    <div style="position:absolute; left:10px; top:5px; width:216px; height:81px;">
    <a href="/index.asp"><img src="/images/logo.gif" alt="logo" /></a>
    </div>
    <div style="position:absolute; right:10px; top:5px; width:468px; height:60px;"><a href="/index.asp">
    <img src="/images/banner.gif" alt="Banner" /></a>
    </div>
    </div>

    <div id="container">

    <div id="topnavigation">
    <img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /></div>
    <div id="leftnav">
    <ul id="base">
    <li><a href="test.asp">Search</a></li>
    <li><a href="test.asp">Contact</a></li>
    <li><a href="test.asp">Add URL</a></li>
    <li><a href="test.asp">Advertise</a></li>
    <li><a href="test.asp">Partners</a></li>
    </ul>

    <img src="/images/Logo.gif" alt="Logo" />
    <img src="/images/125x125.gif" alt="image" />
    </div>
    <div id="rightnav">
    <ul id="base">
    <li><a href="test.asp">Item 1</a></li>
    <li><a href="test.asp">Item 1</a></li>
    <li><a href="test.asp">Item 1</a></li>
    <li><a href="test.asp">Item 1</a></li>
    <li><a href="test.asp">Item 1</a></li>
    </ul>
    </div>
    <div id="content">
    <div style="width:100%"><img src="/images/slider.jpg" /></div>
    <div style="background:#EEF3FB;border:2px solid #8CA5CE;padding:5px;">

    test test

    </div>
    </div>
    </div>

    </body>
    </html>
    Last edited by michaelwall; 12-02-2005 at 02:46 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Loose the 100% width in that div. Divs will expand to fit the their containers.

  • #3
    New Coder
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the only problem with that is the image is indented slightly in IE not FF.
    It should be aligned with the top of the div directly below.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post a link to your site?


  •  

    Posting Permissions

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