0

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
2
Views
7 Years
Discussion Span
Last Post by jimmiller96
0

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!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.