In a way to build an entire layout for a web application we need to know what exactly we need. In this case I'm going to use a 90% width with a top menu, left menu and a right handed help box used to explain what the current section does. It's always useful to draw a mockup of the layout we want to achieve. Since this is a kind of simple layout we don't really need it, but I still did it. Now we need to start working on the XHTML, which is really simple in this case. As you can see, we need a few DIVs like the header, navigation menu, submenu, help, a footer that is not in the mockup but I decided to add, and a DIV that is going to contain all the layout called wrapper.

	
		
		
	
	
		

			
WebApp Title
			

				Here we need the main menu of the webapp.
			
			

				
This is going to be the main block of the webapp. Here we will have tables, lists, text, etc.
				
This is going to be the main block of the webapp. Here we will have tables, lists, text, etc.
				
This is going to be the main block of the webapp. Here we will have tables, lists, text, etc.
			
			

				

					
This is the
					
sub menu of
					
the current section
				
			
			
Here we will have some help depending on the current task.
			
Just the footer
		
	

We need to get the CSS done. I don't really need to explain a lot at this point but I suggest you to play around with the overflow:auto property and maybe with each column width.

body {
	min-width:780px;
}
#wrapper {
	width: 90%;
	margin: 0 auto;
}
#header {
	overflow: auto;
	background: red;
}
#header,#footer {
	width:100%;
}
#navigation {
	background: green;
}
#menu, #content, #help {
	float:left;
}
#content {
	width:57%;
	margin-left:20%;
	background: yellow;
}
#menu {
	width:20%;
	margin-left:-77%;
	background: gray;
}
#help {
	width:23%;
	background: purple;
}
#footer {
	clear:both;
	background: blue;
}

I know it doesn't look that sexy with all these colors but I usually use them when I'm building the XHTML layout. As you can see in the CSS file, we have a wrapper DIV that is holding the rest of the divs, and it's centered and resized to 90% of the browser window size. So, here is the example file for you to download and play around. In the next step I'm going to include the javascript drop down menu I did in a previous post and I'm bringing a color palette to start working on the design.