SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: 2 column layout

  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column layout

    hi,
    I'm having a bit of trouble with my first site in css. i cant seem to align the content side by in the main section. This section uses Horizontal scrolling, which is causing some probs- if i switch to absolute positioning the scroll bar goes through the header and if i use relative i get 2 scroll bars. i would really appreciate any help or pointers?

    <!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><title>3 col layout with equalising columns and footer</title>



    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html, body {height:100&#37;}
    body {
    padding:0;
    margin:0;
    background:000000;
    color: #000000;
    font family: courier;
    font size: 8px;
    }
    #outer{
    height:100%;
    min-height:100%;
    margin-left:216px;
    background:#ffffff;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:-52px;
    color: #000000;
    }

    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#ffffff;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    overflow:hidden;
    color: #000000;

    }

    #contentcontainer{
    position:relative;
    top:0px;
    margin-left:0px;
    margin-top:0px;
    width:100%;
    height:500px;
    background:#ffffff;
    border-top:none;
    border-bottom:1px solid #000;
    overflow:scroll;
    float:right;
    color: #000000;
    padding-left:0px;
    }
    /* divs for main content-------------------------------*/
    #threediv1{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:405px;
    background:#ffffff;
    border-top:none;
    overflow:hidden;
    color: #000000;

    }

    #threediv2{
    position:relative;
    top:0px;
    left:740px;
    width:100%;
    height:405px;
    background:#ffffff;
    border-top:none;
    overflow:hidden;
    float:right;
    color: #000000;
    align:top
    }


    /*end of divs for main content------------------------------*/

    #topnavcontainer{
    position:relative;
    top:10px;
    left:220px;
    width:100%;
    height:90px;
    background:#ffffff;
    border-top:none;
    overflow:hidden;
    color: #000000;
    }

    #topnavcontainer1{
    position:absolute;
    top:40px;
    left:220px;
    width:100%;
    height:90px;
    background:#ffffff;
    border-top:none;
    border-bottom:none;
    overflow:hidden;
    color: #000000;
    }
    /* special */
    * { padding: 0em; margin: 0em; }
    /* ----------------------------- start #topnav ----------------------------- */
    #topnav {position:absolute;}
    #topnav img { border: 0px;}
    #topnav li { display: inline; list-style:none; }
    #topnav li a { float: left; display:block; width: 180px; height: 16px; margin: 0%;}
    #topnav li a img { border:none; vertical-align:bottom; /* for IE6 */}
    #topnav li a:hover { visibility:visible; }
    #topnav li a:hover img { visibility:visible; }
    #topnav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
    /* ----------------------------- end #topnav ----------------------------- */


    /* ----------------------------- start #topnav ids ----------------------------- */
    #one { background:url(img/top_nav/menu_seehear_02.gif) no-repeat left bottom; }
    #two { background:url(img/top_nav/menu_profile_02.gif) no-repeat left bottom; }
    #three { background:url(img/top_nav/menu_contact_02.gif) no-repeat left bottom; }
    #four { background:url(img/top_nav/menu_clients_02.gif) no-repeat left bottom; }
    #five { background:url(img/top_nav/menu_resonate_02.gif) no-repeat left bottom; }
    #six { background:url(img/top_nav/menu_friends_02.gif) no-repeat left bottom; }

    /* ----------------------------- end #nav ids ----------------------------- */


    .logo{
    position:absolute;
    top:3px;
    left:25px;
    }


    #left {
    position:relative;/*ie needs this to show float */
    width:160px;
    float:left;
    border-left:0px solid #000;
    margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
    padding-top:82px;/*needed to make room for header*/
    }
    #left p {padding-left:3px;padding-right:2px}


    #left a{
    font-family: Courier New, Courier, monospace;
    font-size: 12px;
    color: #666666;
    text-decoration:none;
    }


    #left ul {
    list-style: none;
    text-decoration:none;
    margin: 10px;
    padding: 0px;
    }

    #left li {
    border-bottom: 0px solid #ED9F9F;
    font-weight:none;
    text-decoration:none;
    }

    #left li :hover
    {

    font-weight:none;
    text-decoration:none;
    /* border-color:blue;*/
    background-color:#0000ff;
    color:#000000;

    }

    #left li:active
    {

    font-weight:none;
    text-decoration:none;
    background-color:#0000ff;
    color:000000;
    }

    #footer {
    width:100%;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FFFFFF;
    color: #000000;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */




    </style></head><body>
    <div id="outer">

    <div id="left">
    <ul>
    <li><a href="index.htm">Sketch</a></li>
    <li><a href="#">Fiat</a></li>
    <li><a href="#">Shelter</a></li>
    <li><a href="#">Stiff Records</a></li>
    <li><a href="#">3 Mobile</a></li>
    <li><a href="#">Canon</a></li>
    <li><a href="#">Simple Records</a></li>
    <li><a href="#">One&Only Resorts</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">Adidas</a></li>
    <li><a href="#">Ogilvy</a></li>
    <li><a href="#">BBC</a></li>
    <li><a href="#">Kaupthing</a></li>
    <li><a href="#">Cobra</a></li>
    <li><a href="#">Havana Club</a></li><br></br>
    <li><a href="#">Audio-visual<br>performance</a></br></li>
    </ul>

    </div>
    <div id="clearheader"></div> <!-- to clear header -->

    <div id="centrecontent"><!--centre content goes here -->
    <div id="contentcontainer">
    <div id="threediv1">
    <img src="img/three/1.jpg">
    </div>
    <div id="threediv2">
    <img src="img/three/2.jpg">
    </div>
    </div>
    <div id="clearfooter"></div> <!-- to clear footer -->
    </div><!-- end outer div -->

    <div id="footer">Footer - | <a href="http://www.pmob.co.uk/temp/2colfixedtest_3.htm">Left column longest</a>
    | <a href="http://www.pmob.co.uk/temp/2colfixedtest_2.htm">Centre column longest</a> | <a href="http://www.pmob.co.uk/temp/2colfixedtest_4.htm">No
    Column Longest</a> | - Footer
    <p></p>

    </div>
    <div id="header">
    <div class="logo">
    <img src="img/top_nav/logo_silentstudios.gif" width="191" height="23">
    </div>
    <!-- open nav -->
    <div id="topnav">
    <div id="topnavcontainer">
    <ul><li>
    <a title="" href="#" id="one">
    <img src="img/top_nav/menu_seehear_01.gif" alt=""></a>
    </li>
    <li>
    <a title="" href="#" id="two">
    <img src="img/top_nav/menu_profile_01.gif" alt=""></a>
    </li>
    <li>
    <a title="" href="#" id="three">
    <img src="img/top_nav/menu_contact_01.gif" alt=""></a>
    </li>
    </div>
    <div id="topnavcontainer1">
    <li>
    <a title="" href="#" id="four">
    <img src="img/top_nav/menu_clients_01.gif" alt=""></a>
    </li>
    <li>
    <a title="" href="#" id="five">
    <img src="img/top_nav/menu_resonate_01.gif" alt=""></a>
    </li>
    <li>
    <a title="" href="#" id="six">
    <img src="img/top_nav/menu_friends_01.gif" alt=""></a>
    </li>
    </ul>
    </div>


    <!-- close nav --></div>

    </div>

    </body></html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't think you could post a live link to your page so I can see the images, do you?

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey dan,
    nice one for getting back to me.
    its a bit all over the place due to the angel fire me thinks with all the banners etc.


    http://readysteadyeddy07.angelfire.com/

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try using www.awardspace.com (no banners or other ads - and it's free)

    I'll get back to you in a few minutes. Making a late lunch right now.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Dan will help you with the code for the layout - I'll give you the basics.
    You can either float both columns ( 2 floated elements will stack against each other if the combined widths of the element don't exceed 100&#37; ).

    Or you can float 1 column and leave the other in the normal flow with a margin equal to the width of the column. In this case the float needs to be first in the html.

    I think your clearheader div is doing what you would expect and clearing the left column. This could be why the columns aren't side by side.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I'm going to do more than that.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    I'm just buzzing with anticipation

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    s
    Last edited by readysteady; Sep 4, 2007 at 12:26.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't mind me asking, what font did you use for the top link images?

  10. #10
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DevinneBt roman

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah crud. A non-standard font then. Ok, this is going to take a bit longer than I thought.

  12. #12
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't even have the font,i was giving the images already cut up in .jpg

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you HAVE to use that font, or would you mind if I used plain text for now and then linked you to an image substitution technique?

  14. #14
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok dan,

    we'll try it that way

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... this is unusual. I can't seem to recreate your sliding content area without having it break the layout in Opera.

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    How about this?

    Code:
    #contentcontainer{
    	margin-left:-1px;
    }

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is about the best I could come up with in the short time I had.

    http://www.pmob.co.uk/temp/sideways-scroll3.htm
    http://www.pmob.co.uk/temp/sideways-scroll2.htm
    http://www.pmob.co.uk/temp/sideways-scroll.htm
    http://www.pmob.co.uk/temp/2col-nofloatdrop2scroll.htm

    All have their problems but no worse than the frames site you linked to.


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
  •