SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Location
    Reading, UK
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3-col layout problem

    Hi,

    I'm attempting a 3 col layout for the first time, but I'm having problems with getting my right column in line with the middle and left column.

    It ends up looking like this;

    http://img.photobucket.com/albums/v9...muts/3-col.jpg

    I'm aiming to have a left and right column of equal size, with a flash movie in the middle.

    Here's my html

    <!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>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id= "container">
    <div id= "title"><div id= "titleimage"><img src="title.jpg" alt="Revolution Soho"/></div>
    </div>
    <div id="leftcolheader"></div>
    <div id="flashheader">
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="568" height="325" title="flash header">
    <param name="movie" value="header.swf" />
    <param name="quality" value="high" />
    <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="568" height="325"></embed>
    </object>
    </div>
    <div id="rightcolheader"></div>
    </div>
    </body>
    </html>
    and here's my css


    body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    }

    #container {
    width: 800px;
    margin: auto;
    padding: 0 ;
    }

    #title
    {
    height: 64px;
    background-color: #903C28;
    width: 800px;
    padding-top: 3px;
    padding-bottom: 3px;

    }

    #titleimage {
    width: 428px;
    height: 47px;
    margin-left: 7px;
    margin-top: 10px;
    }

    #leftcolheader

    {

    float: left;
    height: 324px;
    background-color: #7C4F36;
    width: 116px;
    margin-top: 3px;
    }

    #flashheader {

    margin-left: 116px;
    margin-top: 3px;

    }

    #rightcolheader

    {
    float: right;
    height: 324px;
    background-color: #7C4F36;
    width: 116px;
    margin-top: 3px;
    padding: 0;

    }
    Thanks for any help!

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my way of doing a 3col is to have 2 div's using {position:absolute; left/right:0px; top:0px} and the center div to just jave margins on each side the same size as the left&right columns

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Location
    Reading, UK
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, this worked really well!


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
  •