Member Avatar for jimmiller96

I am still trying to wrap my head around css columns, and have been playing with some samples created at csscreator.com. I am trying to create a page with a header and footer, then 3 three columns wide for the main content. Additionally, I need to split the main center column into two additional columns. For some reason my code allows the text in the inner most columns to wrap (rather than extend side-by-side to the bottom), or one starts lower than the other (doesn't reach all the way to the top), or other strange happenings. Tables seemed so much easier, but I am trying to learn this method as well. Any quick thoughts to help me get started?

Thanks, Jim

CSS

/* generated by csscreator.com */ 
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
} 
 
#pagewidth{ 
 width:1000px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
} 
 
#header{
 position:relative; 
 height:100px; 
  background-color:silver; 
 width:100%;
} 
 
#leftcol{
 width:160px; 
 float:left; 
 position:relative; 
 background-color:#3336B6; 
 }
 
#twocols{
 width:840px; 
 float:right; 
 position:relative; 
  }
 
#rightcol{
 width:120px; 
 float:right; 
 position:relative; 
 background-color:#337983;
 }
 
#maincol{
  background-color: white;  
 float: left; 
 display:inline; 
 position: relative; 
 width:720px; 
 }
 
#footer{
 height:70px; 
  background-color:#33BC99; 
 clear:both;
 } 
 
#maincol .subcola{
 width:400px; 
 position:relative; 
 background-color:yellow;	
}

#maincol .subcolb{
 width:180px; 
 float:right; 
 background-color:orange;
 }

 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="generator" content="www.csscreator.com" />

<link rel="stylesheet" href="814665-2.css" type="text/css" />
</head>
<body>
<div id="pagewidth" >
	<div id="header" > Head </div>
			<div id="wrapper" class="clearfix" > 
		<div id="twocols" class="clearfix"> 
			<div id="maincol" >
				<div class="subcola">
					one<br/>two<br/>three<br/>four<br/>
				</div>
				<div class="subcolb">
					blah blah blah
				</div>
			</div>
			<div id="rightcol" > right Column </div>
		</div> 
			<div id="leftcol" > Left Column </div>
</div>
	<div id="footer" > Footer 
	</div>
	</div>
</body>
</html>
  • 1 Contributor
  • 1 Reply
  • 98 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by jimmiller96
Member Avatar for jimmiller96

position=relative. This is my new favorite phrase. Stick this in the css file and everything turns up smelling like roses. Remember this, as these are definitely words to live by!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.