Need help with creating sidebar

Discussion in 'CSS' started by bschneider5, Jan 12, 2007.

  1. #1
    If someone could help me out here, I would appreciate it!

    It seems as though my sidebar is lingering at the bottom of my page, and I want it to stretch from header to footer.

    you can see the problem page here info-asbestos.net

    Here is the stylesheet:
    
    
    body{
        font-family: Arial,sans-serif;
        color: #333333;
        line-height: 1.166;    
        margin: 0px;
        padding: 0px;
        background-image:url(BIG-Flames.jpg);
        background-color:#000000;
    
    
    
    }
    
    #wrapper{
    
    width: 800px;
    background-color:#FFFFFF;
    position: center;
    margin: 0 auto;
    padding: 2px 2px 2px 2px;
    
    }
    a:link, a:visited, a:hover {
        color: #006699;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    /* overrides decoration from previous rule for hovered links */
    
    h1, h2, h3, h4, h5, h6 {
        font-family: Arial,sans-serif;
        margin: 0px;
        padding: 0px;
    }
    
    h1{
     font-family: Verdana,Arial,sans-serif;
     font-size: 120%;
     color: #334d55;
    }
    
    h2{
     font-size: 114%;
     color: #000000;
    }
    
    h3{
     font-size: 100%;
     color: #334d55;
    }
    
    h4{
     font-size: 100%;
     font-weight: normal;
     color: #333333;
    }
    
    h5{
     font-size: 100%;
     color: #334d55;
    }
    
    ul{
     list-style-type: square;
    }
    
    ul ul{
     list-style-type: disc;
    }
    
    ul ul ul{
     list-style-type: none;
    }
    
    label{
     font: bold 100% Arial,sans-serif;
     color: #334d55;
    }
                    
    
    /***********************************************/
    /* Layout Divs                                 */
    /***********************************************/
    
    #masthead{
        margin: 0;
        padding: 0px 0px;
        border-bottom: 1px solid #cccccc;
        width: 100%;
        background-color:#000000;
    }
    
    #navBar{
        
        padding: 0px;
        background-color: 000000;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color:#FFFFFF;
        float:left;
        height:100%;
    }
    
    #content{
        width: 75%;
        margin: 0;
        padding: 0 3% 0 0;
    }
    
    
    /***********************************************/
    /*Component Divs                               */
    /***********************************************/
    
    #siteName{
        margin: 0px;
        padding: 0px 0px 10px 10px;
    }
    
    
    /*************** #pageName styles **************/
    
    #pageName{
        padding: 0px 0px 10px 10px;
        font:Arial, Helvetica, sans-serif;
    
    }
    
    
    /************* #globalNav styles **************/
    
    #globalNav{
    color: #cccccc;
    padding: 0px 0px 0px 10px;
    white-space: nowrap;
    }
    /* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
       this will force a horizontal scrollbar if there isn't enough room for all links
       remove rule or change value to 'normal' if you want the links to line-wrap */
    
    #globalNav img{
     display: block;
    }
    
    #globalNav a {
        font-size: 90%;
        padding: 0px 4px 0px 0px; 
    }
    
    
    /************* #breadCrumb styles *************/
    
    #breadCrumb{
        font-size: 80%;
        padding: 5px 0px 5px 10px;
    }
    
    
    /************** .feature styles ***************/
    
    .feature{
        padding: 0px 0px 10px 10px;
        font-size: 80%;
    }
    
    .feature h3{
        padding: 30px 0px 5px 0px;
        text-align: center;
    }
    
    .feature img{
        float: left;
        padding: 0px 10px 0px 0px;
        margin: 0 5px 5px 0;
    }
    
    .feature div{
        border-bottom: 1px solid #000000;
    }
    
    .story img{
        float: right;
        padding: 0px 10px 0px 0px;
        margin: 0 5px 5px 0;
    }
    /* adjust margins to change separation between the feature image and text flowing around it */
    
    
    /************** .story styles *****************/
    
    .story{
        clear: both;
        padding: 10px 0px 0px 10px;
        font-size: 80%;
    }
    
    .story p{
        padding: 0px 0px 10px 0px;
    }
    
    
    /************* #siteInfo styles ***************/
    
    #siteInfo{
        clear: both;
        border: 1px solid #cccccc;
        font-size: 75%;
        color: #cccccc;
        padding: 10px 10px 10px 10px;
        margin-top: 0px;
    }
    /* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
        the bottom border of the navBar in cases where they "touch" */
    
    #siteInfo img{
        padding: 4px 4px 4px 0px;
        vertical-align: middle;
    }
    
    
    /************* #search styles ***************/
    
    #search{
        padding: 5px 0px 5px 10px;
        border-bottom: 1px solid #cccccc;
        font-size: 90%;
    }
    
    #search form{
     margin: 0px;
     padding: 0px;
    }
    
    #search label{
        display: block;
        margin: 0px;
        padding: 0px;
        color:#FFFFFF;
    }
    
    
    /*********** #navBar link styles ***********/
    
    #navBar ul a:link, #navBar ul a:visited {display: block;
    color:#FFFFFF;
    }
    #navBar ul {list-style: none; margin: 0; padding: 0;}
    
    /* hack to fix IE/Win's broken rendering of block-level anchors in lists */
    #navBar li {border-bottom: 1px solid #EEE;}
    
    /* fix for browsers that don't need the hack */
    html>body #navBar li {border-bottom: none;}
    
    
    /*********** #sectionLinks styles ***********/
    
    #sectionLinks{
        position: relative;
        margin: 0px;
        padding: 0px;
        border-bottom: 1px solid #cccccc;
        font-size: 90%;
    }
    
    #sectionLinks h3{
        padding: 10px 0px 2px 10px;
    }
    
    #sectionLinks a:link{
        padding: 2px 0px 2px 10px;
        border-top: 1px solid #cccccc;
        width: 100%;
      voice-family: "\"}\""; 
      voice-family:inherit;
        width: auto;
    }
    
    #sectionLinks a:visited{
        border-top: 1px solid #cccccc;
        padding: 2px 0px 2px 10px;
    }
    
    #sectionLinks a:hover{
        border-top: 1px solid #cccccc;
        background-color: #dddddd;
        padding: 2px 0px 2px 10px;
    }
    
    
    /*********** .relatedLinks styles ***********/
    
    .relatedLinks{
        margin: 0px;
        padding: 0px 0px 10px 10px;
        font-size: 90%;
    }
    
    .relatedLinks h3{
        padding: 10px 0px 2px 0px;
    }
    
    
    /************** #advert styles **************/
    
    #advert{
        padding: 10px 0px 0px 10px;
        font-size: 80%;
        border-top: 1px solid #cccccc;
    }
    
    #advert img{
        display: block;
    }
    
    
    /************** #headlines styles **************/
    
    #headlines{
        margin: 0px;
        padding: 10px 0px 20px 10px;
        font-size: 80%;
    }
    
    #headlines p{
        padding: 5px 0px 5px 0px;
    }
    
    
    
    
    Code (markup):
     
    bschneider5, Jan 12, 2007 IP
  2. EvilivE

    EvilivE Peon

    Messages:
    23
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here, this is what I use:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SEO 2 column fix flex, sidebar left | Allmar Technologies</title>
    <meta name="Author" content="Allmar Technologies, www.allmartech.com" />
    <style type="text/css">
    	* {
    		padding:	0;
    		margin:		0; }
    	p { margin:	14px 0 0 0; }
    	html { background:	#888; }
    	body {
    		font-family:	verdana,arial,helvetica,sans-serif;
    		font-size:		small;
    		min-width:		768px;
    		max-width:		992px;
    		color:			#000;
    		background:		#fff;
    		margin:			1em auto;
    		letter-spacing:	1px;
    		background:		#888; }
    	#pageWrapper {
    		width:		100%;
    		margin:		0 auto;
    		border-top:	15px solid #072a60; }
    	#header {
    		height:		80px;
    		background:	#aaa; }
    	#contentWrapper {
    		float:		left;
    		width:		100%;
    		background:	#808; }
    	#mainWrapper {
    		float:		right;
    		width:		100%;
    		margin:		0 0 0 -250px;
    		background:	#000;}
    	#main {
    		line-height:	1.5em;
    		margin:			0 0 0 250px;
    		background:		#fff; }
    	#breadcrumbs {
    		font-size:	75%; }
    	#sidebar {
    		float:		left;
    		width:		250px;
    		height:		400px;
    		background:	#ddd; }
    	#footer {
    		clear:			both;
    		font-size:		70%;
    		color:			#fff;
    		background:		#072a60;
    		line-height:	3em;
    		text-align:		center; }
    	.bullet {
    		color:		#ca0016;
    		background:	#072a60; }
    	#footer a, #footer a:link, #footer a:visited {
    		color:				#fff;
    		background:			#072a60;
    		text-decoration:	none;
    		border-bottom:		1px solid #ca0016; }
    </style>
    <!--[if lt IE 7]>
    	<style type="text/css">
    	html #pageWrapper { width:expression(document.body.clientWidth > 992? "992px" : "auto"); }
    	</style>
    <![endif]-->
    </head>
    <body>
    <div id="pageWrapper">
    	<div id="header"></div>
    	<div id="contentWrapper">
    		<div id="mainWrapper">
    			<div id="main">
    				<span id="breadcrumbs">breadcrumbs</span>
    				<p>The quick brown fox jumps over the lazy dog.</p>
    			</div>
    		</div>
    		<div id="sidebar">This is the sidebar.</div>
    	</div>
    	<div id="footer">Footer</div>
    </div>
    </body>
    </html>
    
    HTML:
    HTH
     
    EvilivE, Jan 12, 2007 IP