Layout Mix-up: Positioning and Floating

igmuska · **Layout Mix-up: Positioning and Floating -** 10-26-2008, 02:04 AM

I have a question for you involving theoretical layout options using both floats and positioning. I have included my very first layout I designed for one of my friends as an example.
I was wondering whether I am on the right track:

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<**** **********="Content-Type" content="text/html; charset=utf-8" />
	<title>Standing Rock Sioux - Home Page</title>
	<link rel="stylesheet" type="text/css" href="styles/styles.css" media="all" />
</head>
<body>
<div id="wrapper">
	
	<div id="masthead">
	<img src="images/srstlogo.png" alt="Standing Rock Sioux Tribe" width="120px" height="120px" />
	<h1>STANDING ROCK SIOUX TRIBE</h1>
	<h2>Running out the door</h2>
	</div>
	
	<div id="topnav" class="clearfix">
		<ul>
			<li><a href="#" alt="" class="">HOME</a></li>
			<li><a href="#" alt="" class="">VISION &amp; MISSION STATEMENT</a></li>
			<li><a href="#" alt="" class="">DEPARTMENTS</a></li>
			<li><a href="#" alt="" class="">COMMUNITIES</a></li>
			
			<li><a href="#" alt="" class="">ATTRACTIONS</a></li>
			<li><a href="#" alt="" class="">CONTACT US</a></li>
		</ul>
	</div>
<div id="maincontent">
<img src="images/admin.jpg" alt="Standing Rock Sioux Tribe Administration Building" class="clearfix"/>
<div id="subcontent clearfix">
<h2>History</h2>
<p>The Standing Rock Sioux Reservation is situated in North and South Dakota. The people of Standing Rock, often called Sioux, are members of the Dakota and Lakota nations. "Dakota" and "Lakota" mean "friends" or "allies." The people of these nations are often called "Sioux", a term that dates back to the seventeenth century when the people were living in the Great Lakes area. The Ojibwa called the Lakota and Dakota "Nadouwesou" meaning "adders." This term, shortened and corrupted by French traders, resulted in retention of the last syllable as "Sioux." There are various Sioux divisions and each has important cultural, linguistic, territorial and political distinctions.</p>
</div>
</div>

	<div class="midwrapper clearfix">
		<div id="leftcolumn">
			<h2>CHAIRMAN'S NOTES</h2>
		</div><!--end leftcolumn-->
		<div id="midcolumn">
			<h2>LATEST NEWS</h2>
		</div><!--end midcolumn-->
		<div id="rightcolumn">
			<h2>FAVORITE LINKS</h2>
		</div>
	</div>
<div id="footer">
<p>&copy; Tokala International</p>
</div>
</div>

</body>
</html>

CSS

Code:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,
blockquote,th,td { margin:0; padding:0; }

body {
	background-color: #d2d7e4;
	background: url(../images/fade.jpg) repeat-x;
	font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
	width: 900px;
	margin: 25px auto 0 auto;
/*	border: 1px solid black; */
}

#masthead {
	background-image: url(../images/skyback.jpg);
	width: 100%;
	height: 125px;
	background-color: transparent;
	padding-top: 15px;
}

#masthead img {
	float: left;
	margin-left: 25px;
}

#masthead h1, #masthead h2 {
	margin-left: 175px;
	font-size: 2em;
	color: #FFE500;
}

#topnav {
	font-size: 90%;
	height: 25px;
	margin-bottom: 5px;
	width: 100%;
}

#topnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 0.5em;
}

#topnav li {
	display: inline;
}

#topnav a:link, #topnav a:visited {
	padding: 0.4em 1em 0.4em 1em;
	color: #FFFFFF;
	background-color: #9191FF;
	text-decoration: none;
	border: 1px solid #12127D;
}
#topnav a:hover {
	color: #FFFFFF;
	background-color: #711515;
}
#maincontent {
	width: 900px;
	height: 340px;
	background-color: #0066B3;
	color: #FFFFBF;
	font-size: 90%;
	margin-bottom: 5px;
}
#maincontent img {
	float:left;
	margin-right: 10px;
}
#subcontent {
	padding-top: 15px;
	height: 325px;
}
.midwrapper {
	margin-top: 15px;
}
#leftcolumn {
	background-color: #8abbff;
	color: #FFFFBF;
	float: left;
	width: 260px;
	height: 250px;
	margin-left: 0;
	padding: 0px 0px 0px 0px;
	font-size: 85%;
}

#midcolumn {
	background-color: #8abbff;
	color: #FFFFBF;
	float: left;
	width: 260px;
	height: 250px;
	margin-left: 60px;
	padding: 0px;
	font-size: 85%;
}

#rightcolumn {
	background-color: #8abbff;
	color: #FFFFBF;
	float: left;
	width: 260px;
	height: 250px;
	margin-left: 60px;
	padding: 0px;
	font-size: 85%;
}

#leftcolumn h2, #midcolumn h2, #rightcolumn h2 {
	background-color: #9191FF;
	width: 258px;
	border: 1px solid black;
	margin-left: 0px;
	padding: 0px;
	text-align: center;
}

#footer {
	width: 898px;
	height: 50px;
/*	border: 1px solid black; */
	margin-top: 15px;
	background: url(../images/footerfade.jpg) repeat-x;
}
.clearfix:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

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

I omitted the images. My question is, as you can see, there are many divs that I think could be improved with better code, can I position my menus, containing them within divs, then position them (which by the way, is nudge, nudge using Aptana), then just float the content areas and sidebars?

I have also read several books on CSS but they are relatively sparse and don't really discuss best coding practices on layouts mixing positioning and floating.

Am I following the best practices by positioning menus, then floating the rest?