Advanced Search

Return to Snippet

Revision: 12854
at March 30, 2009 21:06 by hotdiggity
Initial 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" xml:lang="en" lang="en">
	<head>
		<title>Equalizing Two Column Layout</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<meta http-equiv="imagetoolbar" content="no"/>
		<style type="text/css">        
/*----------  Resets ----------*/
body, address, blockquote, dl, ol, ul, li, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
} /*--- End Reset ---*/
body {
    font: 100% arial;
    background: #CCC;
}
h2,h3,h4 {padding: .5em .5em 0 .5em; text-align:center;}
p {padding: 0.5em;}
.left {text-align:left;}

#header {
    height: 115px;
    width:100%;
    min-width:960px;
    margin-bottom:-115px;
    background-color: #FFF;
    position:relative;
}
#main {
    background: silver; /*left sidebar color*/
    margin: 0 auto;
    width: 960px;   
}
#clearheader{
    height:115px;
    background: #CCC;      
}             
#navbar {
    height: 50px;
    background: silver;
    border-bottom: 20px solid #CCC;
}
#container {
    background: #FFF; /*Main Content Color*/
    margin-right: 220px;
}
#innerwrap {
    background: #FFF; /*Main Content Color*/
    float: left;
    border-right:20px solid #CCC;
    width:100%;
}
#sidebar {
    float: right;
    margin-right: -220px; /*make room for 20px border*/
    position: relative;        /* fixes an IE 6 bug */
    width: 200px;
}
#content {/* style rules for the content go here */}

#footer {
    background: silver;
    clear: both;
    text-align: center;
    height:2em;
    line-height:2em;
    border-top: 20px solid #CCC;
}
		</style>
	</head>
	<body>
<!--[if gte IE 6 ]>
<style type="text/css">    
#sidebar {margin-left:20px;} /* needed for IE7 sidebar alignment */
#innerwrap {margin-right:-20px}/* needed for IE6 border alignment */
* html #header { /*min-width for IE6*/
    width: 100%; /* Fallback width if javascript is off */
    width: expression(  
    (document.documentElement.clientWidth < 962) ? "960px" : "auto");
}    
</style>
<![endif]-->
		<div id="header">
			<h2>Equalizing Two Column Layout</h2>
			<h3>Full Width Header ~ Fixed Width Content</h3>
		</div><!-- end #header -->
		<div id="main">
			<div id="clearheader"></div>
			<div id="container">
				<div id="innerwrap">
					<div id="sidebar">
						<h4>Left Column</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
							sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
							Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
							ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
							ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
							elementum et, urna. Proin vehicula viverra sapien.
						</p>
					</div>
					<div id="content">
						<div id="navbar">
							<h4>Navbar</h4>
						</div>
						<h4 class="left">Main Content</h4>
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
							sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
							Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
							ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
							ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
							elementum et, urna. Proin vehicula viverra sapien.
						</p>
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
							sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
							Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
							ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
							ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
							elementum et, urna. Proin vehicula viverra sapien.
						</p>
					</div><!-- end #content -->
				</div><!-- end #innerwrap -->
			</div><!-- end #container -->
			<div id="footer">
				<h5>your copyright &copy; 2006-2008, &amp; other footer stuff here</h5>
			</div>
		</div>
	</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Equalizing Two Column Layout with Full Width Header ~ Fixed Width Content

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Equalise two columns

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, html

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML