3 Column CSS Layout?

Discussion in 'CSS' started by gobbly2100, Aug 15, 2007.

0
  1. #1
    Hello,

    I was wondering if I could get some info on making a 3 column CSS layout, I have found a few things on Google but don't really understand them fully.

    Any good links about that is for the real noobs . . . like me?
     
    gobbly2100, Aug 15, 2007 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    Your lucky night. I have the holy grail book-marked. It is even okay to copy and use it.

    Have fun. I have. The CSS is only the start of your fun. :)
     
    Colbyt, Aug 15, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Meh. Ever hear of the Public Domain?

    Try this. (Yes, I released this to the Public Domain - that means you can do anything you want with it except copyright it and pass it off as your own.)

    
<!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" xml:lang="en" lang="en">
<head>
	<title>Three Column Layout with Horizontal Main Menu Site Template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A description of this page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<style type="text/css" media="screen,projection">
	
	* {
		margin:0;
		padding:0;
	}

	html, body {
		height: 100%;
	}

	body {
		background: #EEE;
		color: #000;
		font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	}

	#container {
		min-height:100%;									/* squashes an IE 7 bug */
	}

	* html #container {
		height:100%;										/* IE 5.x and 6 treat height as min-height */
	}
		#header {
			background: #FCF;
			color: inherit;
			height: 80px;
		}

		#wrapper {
			float: left;
			padding-bottom: 32px;
			width: 100%;
		}
			#search-form div {
				background: #CCC;
				color: inherit;
				float: right;
				height: 2em;
			}
				* html #search-form div {
					position: relative;
						right: 3px;
				}

				#search-form input {
					float: left;
					margin: 0.25em;
					padding: 0 0.4em;
				}

				* html #search-form .submit {
					margin: 1px 0 -1px 0;
					padding: 0;
				}

				*:first-child+html #search-form .submit {
					margin-top: 1px;
					padding: 0;
				}
			
			#main-menu {
				background: #CCC;
				color: inherit;
				height: 2em;								/* IE Haslayout - fix double margin */
				line-height: 2em;
				list-style: none;
			}
				#main-menu li {
					display: inline;
					white-space: nowrap;
				}
					#main-menu a {
						background: #0E0;
						color: inherit;
						float: left;
						height: 2em;
						margin-right: 1px;
						padding: 0 0.5em;
						text-decoration: none;
					}

					#main-menu a:active,
					#main-menu a:focus,
					#main-menu a:hover {
						background: #FF8;
						color: #000;
					}

			h1 {
				background: #FFF;
				clear: both;
				color: inherit;
				font-size: 1.75em;
				line-height: 1.8em;
			}

			#content {
				float: left;
				margin-bottom: 0.5em;
				width: 100%;
			}
				#content .section {
					background: #CCF;
					color: inherit;
					font-size: 1em;
					height: 1%;							/* triggers hasLayout in IE 5/6; ignored by other browsers due to lack of height definition in #content */
					margin: 0 14.5em 0 9.85em;
					padding: 0.5em;
				}
					#content h2 {
						background: #CCF;
						border-bottom: 1px solid #000;
						color: inherit;
						margin-bottom: 0.2em;
						padding-bottom: 0.25em;
					}

			#sidebar {
				background: #FFD;
				color: inherit;
				float: left;
				margin: 0 0 0.5em -14em;
				padding: 0.5em 0;
				width: 14em;
			}
				#sidebar h2 {
					background: #FFD;
					border-bottom: 1px solid #000;
					color: inherit;
					margin-bottom: 0.2em;
					padding-bottom: 0.25em;
					text-align: center;
				}

				#sidebar p {
					padding: 0 0.5em;
				}
			
			#secondary-menu {
				float: left;
				list-style: none;
				margin: 0 0 0.5em -100%;
				width: 9.75em;
			}
				#secondary-menu li {
					float: left;
					padding-bottom: 1px;
				}
					#secondary-menu a {
						background: #FCC;
						color: inherit;
						display: block;
						padding: 0.25em 0.5em;
						text-decoration: none;
						width: 8.25em;						/* IE will mouseover highlight but not let you click link in 'non-text' area unless you set width */
					}

					#secondary-menu a:active,
					#secondary-menu a:focus,
					#secondary-menu a:hover {
						background: #FF0;
						color: #000;
					}
	
	#footer {
		background: #8EF;
		color: inherit;
		float: left;
		font: normal 12px/16px tahoma, verdana, arial, helvetica, sans-serif;
		margin-top: -32px;
		padding: 8px 0;
		text-align: center;
		width: 100%;
	}

	</style>
</head>
<body>
<div id="container">
	<div id="header">
		<img src="#" width="300" height="80" alt="Web Site Title" />
	</div>
	<div id="wrapper">
		<form action="#" id="search-form" method="get">
			<div>
				<input type="text" id="search" name="search" size="25" /> 
				<input type="submit" class="submit" value="Search" />
			</div>
		</form>
		<ul id="main-menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
		</ul>
		<h1>Top Level Heading</h1>
		<div id="content">
			<div class="section">
				<h2>Second Level Heading</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
					auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
					lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
					eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
					metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
					egestas vel, commodo bibendum, est.
				</p>
			</div>
			<div class="section">
				<h2>Second Level Heading</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
					auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
					lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
					eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
					metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
					egestas vel, commodo bibendum, est.
				</p>
			</div>
		</div>
		<div id="sidebar">
			<h2>Sidebar Heading</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
				consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
				scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
				pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
				Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
				vel, commodo bibendum, est.
			</p>
		</div>
		<ul id="secondary-menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
		</ul>
	</div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights to Scare
		Unsuspecting Children Reserved.
	</p>
</div>
</body>
</html>
    Code (markup):
     
    Dan Schulz, Aug 15, 2007 IP