CSS div / column layout problem

programming web dev
1

i’ve been looking at this tutorial:http://www.webreference.com/authoring/style/sheets/layout/advanced/ and i really like the ideas… but i must be slow or something, cause i cant seem to use those ideas to create my own layout. (see attached gif) i’m hoping somebodyhere could show me what i need to do to create this layout using div/span tags and… comment the code. i’m assuming for anybody who understands those techniques well, it’d only take a minute or two…

however if i’m mistaken, and thats actually a lot of work, then maybe somebody could point me to some other tutorials that might be a little eaiser for me to follow? or maybe to a layout online somewhere that is like what i’m trying to do?

thanks a zillion!!

2

Here bud… all CSS all DIVs, to see it just copy and paste it into your editor.


<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
}
#top {
	background-color: #333333;
	position: relative;
	height: 50px;
	width: 500px;
}
#mid {
	background-color: #FF0000;
	position: relative;
	height: 500px;
	width: 500px;
}
#bottom {
	background-color: #333333;
	position: relative;
	height: 50px;
	width: 500px;
}
#rightmid {
	position: absolute;
	top: 10px;
	left: 250px;
	height: 375px;
	width: 250px;
}
#leftmid {
	position: absolute;
	top: 10px;
	height: 375px;
	width: 250px;
	left: 0px;
}
#lower {
	height: 50px;
	width: 80%;
	border: 1px solid #FFFFFF;
	position: relative;
	top: 425px;
}
#leftinner {
	border: 1px solid #FFFFFF;
	height: 100%;
	width: 96%;
}
#rightinner {
	border: 1px solid #FFFFFF;
	height: 100%;
	width: 96%;
}
font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #FFFFFF;
}
div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
-->
</style>
</head>

<body><center>
<div id="top">top nav</div>
<div id="mid">
  <div id="leftmid">
    <div id="leftinner">content 1 </div>
  </div>
  <div id="rightmid">
    <div id="rightinner">content 2 </div>
  </div>
  <div id="lower">content 3 </div>
</div>
<div id="bottom">bottom nav </div>
</center>
</body>
</html>
3

wow! cool! and thanks a lot!!
a question tho, cause i’m trying to really understand:

why have both a [color=#ff8000]#leftinner [color=black]&[/color] #leftmid [/color][color=black]?? i see that the inner’s widths are set to 96%… and why doesnt [color=#ff8000]#lower[/color] have an “[color=darkorange]#lowerinner[/color]”? i’m assuming it all has to do with getting things to line up properly - but if you could shed a little light on that, i’d appreciate it![/color]

4

Umm… the leftmid and rightmid widths combined are = to the mid width. the leftinner and rightinner the are centered in two parents (leftmid & rightmid) that way they are always the same distance apart, by making it a percentage it makes it equal sizing on the left and right, you can make it a static size if you want. As for the lower inner… since it doesn’t need to be an equal distance or look like it is… it’s basically the child only to the mid and is centered on that.