SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: 3-Column Layout

Hybrid 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

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,827
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try this:
    HTML Code:
    <?php /* */ ?>
    <!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" />
    
    <style type='text/css'>
    @charset "utf-8";
    /* CSS Document */
    * {margin: 0;padding: 0;}
    body {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 { list-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 15px  10px 15px;}
    .left {float: left; width:28%; margin:1% 1% 1% 2%; height: auto;
    background-color: #FFFFCC;padding:5px;
    padding-top: 5px; padding-bottom: 10px;}
    #clear { clear: both;width: auto;height: 1px;}
    #footer {width: 665px;width:100%;height: 55px;background-color: #03F;
    text-align: center;color: fff;font-size: 0.75em;}
    p {padding: 15px;}
    .bg1 {background:#cfc none;color:#000}
    .bg2 {background:#ff0 none;color:#000}
    .bg3 {background:#cff none;color:#000}
    div {outline:dotted 0px #f00}
    </style>
    </head>
    <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 class="left bg1">
    		<h3>WWW 131</h3>
    		
    		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.
    
    	</div>
    
    	<div class="left bg2">
    		<h3>WWW 131</h3>
    		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.
    	</div>
    
    	<div class="left bg3">
    		<h3>WWW 131</h3>
    		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.
    	</div>
    
    	<div id="clear">
    	</div>
    
    	<div id="footer">
    		<p>
    			College
    		</p>
    	</div>
    
    </div><!-- wrapper -->
    
    </body>
    </html>



    .

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know, you're supposed to do the homework yourself.

    I think I'd simplify the markup a bit, and make some of the tokens a bit more semantic.

    I also did not make all three columns the same width, making the center column a bit wider, as is common.
    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 name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
            
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    
      <title>Test</title>
      <style type="text/css">
    /*<![CDATA[*/
    
      /*Lose this. It's redundant make-work*/
      /*
      * {
      margin: 0;
      padding: 0;
      }
      */
    
      body {
        margin: 0px;
        padding: 0px;
        font-size: 1em;
        line-height: 135&#37;;
        font: Arial, Helvetica, sans-serif;
        background-color: #b8af8d;
        }
    
      h1 {
        color: #fff;
        margin: 25px 15px 10px;
        }
    
      #wrapper {
        border: 1px solid #0000FF;
        margin: 0px auto;
        width: 700px;
        height: auto;
        background-color: #FFFFCC;
        }
    
      #header {
        height: 125px;
        background-color: #00F;
        padding-top: 1px;   /*blocks margin-collapse*/
        }
    
      ul#nav {
        height: 45px;
        background-color: #6CF;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
        }
    
      ul#nav li {
        display: inline;
        padding: 6px 20px;
        color: #660099;
        font-weight: bold;
        }
    
      #nav a {
        text-decoration: none;
        }
    
      #nav a:link,
      #nav a:visited {
        color: #ffffff;
        }
    
      #nav a:hover {
        color: #e5e3d7;
        }
    
      #nav a:active {
        color: #ceb6af;
        }
    
      #container {
        background-color: #FFFFCC;
        overflow: hidden;   /*encloses float elements*/
        zoom: 1;   /*for IE6*/
        }
    
      .sidebar {
        width: 175px;
        float: left;
        margin: 15px 10px 0;
        padding: 5px 5px 10px;
        }
    
      #main {
        float: left;
        width: 270px;
        margin: 15px 0 0;
        padding: 5px 10px 10px;
        }
    
      /*unnecessary*/
      /*
      #clear { clear: both;
        width: auto;
        height: 1px;
        }
      */
    
      #footer {
        width: 665px;
        height: 55px;
        margin: 0 auto;
        background-color: #03F;
        text-align: center;
        color: #fff;   /*don't forget the octothorpe*/
        font-size: 0.75em;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="wrapper">
        <div id="header">
          <h1>College</h1>
        </div><!--end of header -->
    
        <ul id="nav">
          <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 id="container">
          <div class="sidebar">
    
            <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="main">
            <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 class="sidebar">
            <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><!-- end container -->
    
        <div id="footer">
          <p>College</p>
        </div>
      </div> <!-- end wrapper -->
    </body>
    </html>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


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
  •