SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Want to add a third column to a design

    Hi all,

    I have this template I got from freecsstemplates, where you can see here in its entirety: http://www.freecsstemplates.org/temp...ews/landscape/. What I want to do is duplicate the left News & Events bar, and put it on the right of the main content, thereby having three columns. I can't seem to make this work. The original css file is below:

    Code:
    /*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    body {
    	margin: 20px 0 0 0;
    	padding: 0;
    	background: #FFFFFF url(images/img01.jpg);
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #333333;
    }
    
    h1, h2, h3 {
    	margin: 0;
    	font-weight: normal;
    	color: #AD1112;
    }
    
    h1 {
    	font-size: 197%;
    }
    
    h2 {
    	font-size: 167%;
    }
    
    h3 {
    	font-size: 100%;
    	font-weight: bold;
    }
    
    p, ol, ul {
    	line-height: 180%;
    }
    
    p {
    }
    
    ol {
    }
    
    ul {
    }
    
    blockquote {
    	margin: 0;
    	padding-left: 20px;
    	font-style: italic;
    }
    
    blockquote * {
    	line-height: normal;
    }
    
    a {
    	color: #AD1112;
    }
    
    a:hover {
    	text-decoration: none;
    }
    
    img {
    	border: none;
    }
    
    img.left {
    	float: left;
    	margin: 0 15px 0 0;
    }
    
    img.right {
    	float: right;
    	margin: 0 0 0 15px;
    }
    
    hr {
    	display: none;
    }
    
    /* Header */
    
    #header {
    	width: 700px;
    	height: 220px;
    	margin: 0 auto;
    	background: url(images/img02.jpg) no-repeat right top;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    	width: 220px;
    	height: 220px;
    	background: #AD1011 url(images/img03.jpg);
    }
    
    #logo h1, #logo h2 {
    	margin: 0;
    	text-transform: lowercase;
    	text-align: center;
    	font-weight: normal;
    }
    
    #logo h1 {
    	padding: 120px 0 0 0;
    	background: url(images/img04.jpg) no-repeat 50% 30px;
    	letter-spacing: -1px;
    	font-size: 36px;
    }
    
    #logo h2 {
    	font-size: 18px;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 470px;
    	height: 40px;
    	padding: 180px 0 0 0;
    }
    
    #menu ul {
    	width: 466px;
    	height: 40px;
    	margin: 0;
    	padding: 0;
    	background: #AD1011 url(images/img05.jpg) repeat-x;
    	border-left: 2px solid #FFFFFF;
    	border-right: 2px solid #FFFFFF;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	height: 32px;
    	padding: 8px 20px 0 19px;
    	background: url(images/img06.gif) no-repeat;
    	text-transform: lowercase;
    	text-decoration: none;
    	font-size: 16px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    /* Page */
    
    #page {
    	width: 700px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    #content {
    	float: right;
    	width: 430px;
    	padding: 20px;
    	background: #FFFFFF url(images/img07.gif) no-repeat left bottom;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: left;
    	width: 220px;
    	padding-top: 10px;
    }
    
    #sidebar a {
    	color: #3699E4;
    }
    
    #sidebar ul {
    	margin-left: 0;
    	padding-left: 0;
    	list-style: none;
    	font-size: 92%;
    }
    
    #sidebar ul li {
    	padding: 5px 14px;
    	background: url(images/img13.gif) no-repeat 0px 12px;
    	border-top: 1px solid #0B0B0B;
    }
    
    #sidebar ul li.first {
    	border: none;
    }
    
    #sidebar ul li h2 {
    	margin: 0;
    	font-size: 100%;
    }
    
    #sidebar ul li h3 {
    	margin: 0;
    	font-size: 92%;
    }
    
    #sidebar ul li p {
    	margin: 0;
    }
    
    .boxed {
    	margin-bottom: 10px;
    	background: #000000 url(images/img10.gif) no-repeat left bottom;
    }
    
    .boxed .title {
    	height: 30px;
    	margin: 0;
    	padding: 10px 0 0 10px;
    	background: #5EB2ED url(images/img08.jpg) no-repeat;
    	font-size: 16px;
    	font-weight: bold;
    	color: #000000;
    }
    
    .boxed .content {
    	padding: 15px;
    	background: url(images/img09.gif) repeat-x;
    }
    
    /* Search */
    
    #search {
    }
    
    #search form {
    	margin: 0;
    	padding: 0;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search p {
    	margin: 0;
    	font-size: 85%;
    }
    
    #searchinput {
    	float: right;
    	width: 174px;
    	padding: 2px 5px;
    	background: #EFEFEF url(images/img11.gif) repeat-x;
    	border: 1px solid #FFFFFF;
    	font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #searchsubmit {
    	float: right;
    	margin-top: 5px;
    	background: #AD1112 url(images/img12.gif) repeat-x;
    	border: none;
    	font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    }
    
    /* Footer */
    
    #footer {
    	height: 100px;
    }
    
    #footer p {
    	margin: 0;
    	line-height: normal;
    	font-size: 85%;
    	color: #000000;
    }
    
    #footer a {
    	color: #000000;
    }
    Initially, what I tried to do was to add within <div id="page">, a copy of
    #sidebar, but with float: right; like so:

    Code:
    #sidebarcopy {
    	float: right;
    	width: 220px;
    	padding-top: 10px;
    }
    Then I added the html after everything but within the <div id="page">. This didn't work; the new div was below the original design! I tried changing the content div to have position: relative like so instead of float:right like so:

    Code:
    #content {
    	position: relative;
    	width: 430px;
    	padding: 20px;
    	background: #FFFFFF url(images/img07.gif) no-repeat left bottom;
    }
    But this similarly did not work. I am really confused here -- could anyone give me some pointers? Thanks a lot!

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any ideas? If anyone could just give me some start points on how to get that third column up, I would really appreciate it. Thanks!

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately it's not that simple due to the way that the elements have been positioned and the header will cause you some problems without significantly changing the code.

    However, with a few tweaks it's possible and the following code should do what you're after.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--
    
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    
    Title      : Landscape
    Version    : 1.0
    Released   : 20070725
    Description: A two-column, fixed-width template.
    
    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Landscape by Free Css Templates</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    body {
    	margin: 20px 0 0 0;
    	padding: 0;
    	background: #FFFFFF url(images/img01.jpg);
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #333;
    }
    
    h1, h2, h3 {
    	margin: 0;
    	font-weight: normal;
    	color: #AD1112;
    }
    
    h1 {
    	font-size: 197&#37;;
    }
    
    h2 {
    	font-size: 167%;
    }
    
    h3 {
    	font-size: 100%;
    	font-weight: bold;
    }
    
    p, ol, ul {
    	line-height: 180%;
    }
    
    blockquote {
    	margin: 0;
    	padding-left: 20px;
    	font-style: italic;
    }
    blockquote * {
    	line-height: normal;
    }
    a {
    	color: #AD1112;
    }
    a:hover {
    	text-decoration: none;
    }
    img {
    	border: none;
    }
    img.left {
    	float: left;
    	margin: 0 15px 0 0;
    }
    img.right {
    	float: right;
    	margin: 0 0 0 15px;
    }
    hr {
    	display: none;
    }
    
    /* Header */
    
    #header {
    	float: left;
    	width: 700px;
    	height: 220px;
    	background: url(images/img02.jpg) no-repeat right top;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    	width: 220px;
    	height: 220px;
    	background: #AD1011 url(images/img03.jpg);
    }
    
    #logo h1, #logo h2 {
    	margin: 0;
    	text-transform: lowercase;
    	text-align: center;
    	font-weight: normal;
    }
    
    #logo h1 {
    	padding: 120px 0 0 0;
    	background: url(images/img04.jpg) no-repeat 50% 30px;
    	letter-spacing: -1px;
    	font-size: 36px;
    }
    
    #logo h2 {
    	font-size: 18px;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 470px;
    	height: 40px;
    	padding: 180px 0 0 0;
    }
    #menu ul {
    	width: 466px;
    	height: 40px;
    	margin: 0;
    	padding: 0;
    	background: #AD1011 url(images/img05.jpg) repeat-x;
    	border-left: 2px solid #FFFFFF;
    	border-right: 2px solid #FFFFFF;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	height: 32px;
    	padding: 8px 20px 0 19px;
    	background: url(images/img06.gif) no-repeat;
    	text-transform: lowercase;
    	text-decoration: none;
    	font-size: 16px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    /* Page */
    
    #page {
    	float: left;
    	width: 700px;
    }
    
    /* Content */
    
    #content {
    	float: right;
    	width: 430px;
    	padding: 20px;
    	background: #FFFFFF url(images/img07.gif) no-repeat left bottom;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: left;
    	width: 220px;
    	padding-top: 10px;
    }
    
    #sidebar a {
    	color: #3699E4;
    }
    
    #sidebar ul {
    	margin-left: 0;
    	padding-left: 0;
    	list-style: none;
    	font-size: 92%;
    }
    
    #sidebar ul li {
    	padding: 5px 14px;
    	background: url(images/img13.gif) no-repeat 0px 12px;
    	border-top: 1px solid #0B0B0B;
    }
    
    #sidebar ul li.first {
    	border: none;
    }
    
    #sidebar ul li h2 {
    	margin: 0;
    	font-size: 100%;
    }
    
    #sidebar ul li h3 {
    	margin: 0;
    	font-size: 92%;
    }
    
    #sidebar ul li p {
    	margin: 0;
    }
    
    .boxed {
    	margin-bottom: 10px;
    	background: #000000 url(images/img10.gif) no-repeat left bottom;
    }
    
    .boxed .title {
    	height: 30px;
    	margin: 0;
    	padding: 10px 0 0 10px;
    	background: #5EB2ED url(images/img08.jpg) no-repeat;
    	font-size: 16px;
    	font-weight: bold;
    	color: #000000;
    }
    
    .boxed .content {
    	padding: 15px;
    	background: url(images/img09.gif) repeat-x;
    }
    
    /* Search */
    
    #search {
    }
    
    #search form {
    	margin: 0;
    	padding: 0;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search p {
    	margin: 0;
    	font-size: 85%;
    }
    
    #searchinput {
    	float: right;
    	width: 174px;
    	padding: 2px 5px;
    	background: #EFEFEF url(images/img11.gif) repeat-x;
    	border: 1px solid #FFFFFF;
    	font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    #searchsubmit {
    	float: right;
    	margin-top: 5px;
    	background: #AD1112 url(images/img12.gif) repeat-x;
    	border: none;
    	font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    }
    
    /* Footer */
    
    #footer {
    	height: 100px;
    }
    
    #footer p {
    	margin: 0;
    	line-height: normal;
    	font-size: 85%;
    	color: #000000;
    }
    
    #footer a {
    	color: #000000;
    }
    
    /* New Styles */
    
    #container {
    	width: 930px;
    	margin: 0 auto;
    	overflow: auto;
    }
    #sidebarcopy {
    	float: right;
    	width: 220px;
    }
    
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="sidebarcopy">
    		<div id="news-copy" class="boxed">
    			<h2 class="title">News &amp; Events</h2>
    			<div class="content">
    				<ul>		
    					<li class="first">
    						<h3>04 July 2007</h3>
    						<p><a href="#">In posuere eleifend odio quisque semper&hellip;</a></p>
    					</li>
    					<li>
    						<h3>29 June 2007</h3>
    						<p><a href="#">Donec leo, vivamus fermentum nibh in augue&hellip;</a></p>
    						
    					</li>
    					<li>
    						<h3>13 June 2007</h3>
    						<p><a href="#">Quisque dictum integer nisl risus sagittis&hellip;</a></p>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    	<div id="header">
    		<div id="logo">
    			<h1><a href="#">Landscape</a></h1>
    			<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
    		</div>
    		<div id="menu">
    			<ul>
    				<li class="active"><a href="#">Home</a></li>
    				<li><a href="#">Products</a></li>
    				<li><a href="#">Support</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Contact</a></li>
    			</ul>
    		</div>
    	</div>
    	<div id="page">
    		<div id="content">
    			<div>
    				<h1 class="title">Welcome to Our Website!</h1>
    	
    				<p><img src="images/img10.jpg" alt="" width="118" height="118" class="right" /></p>
    				<p><strong>Landscape</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
    	
    				<h2>Praesent Scelerisque</h2>
    				<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
    				<blockquote>
    					<p>&ldquo;Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget.&rdquo;</p>
    				</blockquote>
    			</div>
    			<div class="twocols">
    	
    				<div class="col1">
    					<h2 class="title">Lorem Ipsum Dolor</h2>
    					<p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
    					<p><a href="#">Read more&hellip;</a></p>
    				</div>
    				<div class="col2">
    					<h2 class="title">Pellentesque Quis</h2>
    	
    					<ul class="list">
    						<li><a href="#">Ut semper vestibulum est</a></li>
    						<li><a href="#">Vestibulum luctus dui</a></li>
    						<li><a href="#">Integer rutrum nisl in mi</a></li>
    						<li><a href="#">Etiam malesuada rutrum</a></li>
    						<li><a href="#">Aenean elementum facilisis ligula</a></li>
    	
    						<li><a href="#">Ut tincidunt elit vitae augue</a></li>
    						<li><a href="#">Sed quis odio sagittis leo vehicula</a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    		<div id="sidebar">
    			<div id="search" class="boxed">
    	
    				<h2 class="title">Search</h2>
    				<div class="content">
    					<form id="searchform" method="get" action="">
    						<fieldset>
    						<input id="searchinput" type="text" name="searchinput" value="" />
    						<input id="searchsubmit" type="submit" value="Search" />
    						</fieldset>
    					</form>
    	
    					<p><a href="#">Advanced Search</a></p>
    				</div>
    			</div>
    			<div id="news" class="boxed">
    				<h2 class="title">News &amp; Events</h2>
    				<div class="content">
    					<ul>
    	
    						<li class="first">
    							<h3>04 July 2007</h3>
    							<p><a href="#">In posuere eleifend odio quisque semper&hellip;</a></p>
    						</li>
    						<li>
    							<h3>29 June 2007</h3>
    							<p><a href="#">Donec leo, vivamus fermentum nibh in augue&hellip;</a></p>
    	
    						</li>
    						<li>
    							<h3>13 June 2007</h3>
    							<p><a href="#">Quisque dictum integer nisl risus sagittis&hellip;</a></p>
    						</li>
    					</ul>
    				</div>
    			</div>
    	
    			<div id="extra" class="boxed">
    				<h2 class="title">Sagittis Convallis</h2>
    				<div class="content">
    					<ul class="list">
    						<li class="first"><a href="#">Ut semper vestibulum est</a></li>
    						<li><a href="#">Vestibulum luctus venenatis</a></li>
    						<li><a href="#">Integer rutrum nisl in mi</a></li>
    	
    						<li><a href="#">Etiam malesuada rutrum enim</a></li>
    						<li><a href="#">Aenean elementum facilisis</a></li>
    						<li><a href="#">Ut tincidunt elit vitae augue</a></li>
    						<li><a href="#">Sed quis odio sagittis leo</a></li>
    					</ul>
    				</div>
    			</div>
    	
    			<div id="footer">
    				<p id="legal">&copy;2007 Landscape. All Rights Reserved<br />
    					Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
    				<p id="links"><a href="#">Privacy</a> | <a href="#">Terms</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
    	
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Obviously, the CSS should be moved to an external file.

    All I've done is floated a the header, changed a few widths and changed the way some of the elements are positioned as well as adding an overall container to make positioning things a little easier.

    I've not been able to see this with the images applied but it should work and has been tested in IE6 + Firefox so should be fine to go in all the latest browsers as well.

    Hope that helps.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, CSS wiz you are a lifesaver. I have tried this code and it is simply beautiful. Thanks so much for taking the time to respond with a solution!


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
  •