SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: 3-Column Layout

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3-Column Layout

    How can I create 2 more columns that are the same size as <div id="left">
    I want one in the center and the other to the right? I can't center the footer either
    HELP!
    Thank you
    Code:
    <!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=utf-8" />
    
    <title>College</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    
    @charset "utf-8";
    /* CSS Document */
    
    * {
    margin: 0;
    padding: 0;
    }
    
    body {
        margin: 0px;
        padding: 0px;
        font-size: 1em;
        line-height: 135&#37;;
        font: Arial, Helvetica, sans-serif;
        background-color: #b8af8d;
    }
    #wrapper {
        border: 1px solid #0000FF;
        margin: 0px auto;
        padding: 0px;
        width: 700px;
        height: auto;
        background-color: #FFFFCC;
    }
    
    #header {
        width: 700px;
        height: 125px;
        background-color: #00F;
        }
    
    #nav {
        width: 700px;
        height: 45px;
        background-color: #6CF;
    }
    
    #nav ul { margin-top: 6px;
    margin-bottom: 5px;
    margin-left: 25px;
    padding-left: 0pt;
    }
    
    #nav ul li { l
    ist-style-type: none;
    display: inline;
    padding-right: 20px;
    color: #660099;
    font-weight: bold;
    }
    
    #nav a { text-decoration: none;
    }
    
    #nav a:link { color: #ffffff;
    text-decoration: none;
    }
    
    #nav a:visited {
        color: #FFFFFF;
    }
    
    #nav a:hover {
        color: #e5e3d7;
    }
    
    #nav a:active {
        color: #ceb6af;
    }
    
    #container { width: 760px;
    height: auto;
    }
    
    h1 { color: #fff;
        padding: 1px;
        margin-top: 25px;
        margin-right: 15px;
        margin-bottom: 10px;
        margin-left: 15px;
    }
    
    #left {
        width: 175px;
        height: auto;
        background-color: #FFFFCC;
        float: left;
        margin-top: 15px;
        margin-left: 15px;
        margin-bottom: 15px;
        padding-top: 5px;
        padding-bottom: 10px;
        float: left;
    }
    
    #clear { clear: both;
    width: auto;
    height: 1px;
    }
    
    #footer {
        width: 665px;
        height: 55px;
        background-color: #03F;
        text-align: center;
        color: fff;
        font-size: 0.75em;
    }
    p {
        padding: 5px:
    }
    
    <body>
    
    <div id="wrapper">
    
    <div id="header">
    <h1>College</h1>
    </div> <!--end of header -->
    
    <div id="nav">
    <ul id="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">WWW 131</a></li>
      <li><a href="#">WWW 132</a></li>
      <li><a href="#">WWW 141</a></li>
    </ul>
    </div><!--end of nav -->
    
    <div id="left">
    <h3>WWW 131</h3>
    
    <p>Course expands basic development of Web pages. Content focuses on the use of   Cascading Style Sheet to present the content of a well structured XHTML document in a meaningful method./>
    </p>
    
    </div>
    
    <div id="clear"></div>
    
    </div>
    
    <div id="footer">
    <p> College</p>
    </div>
    </div>
    
    </div>
    
    </body>
    </html>
    Last edited by Paul O'B; May 6, 2010 at 02:24. Reason: [ code ] tags added


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
  •