CSS - Fixed Width Layouts And Liquid Layouts Explain Please

Hi Guys,

I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is.

I'm trying to get it to be a set width. I can't quite get it figured out.

Here is the link to the current layout (made to be generic).

It's a layout I got from a CCS class.

http://65.175.116.253/design/demo.html

The css is here

http://65.175.116.253/design/css.css

The entire package can be downloaded here

http://65.175.116.253/design/design.rar

Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy.

http://65.175.116.253/design/demo.jpg

Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever.

Here is the CSS



Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: right;
	width: 17em;
	margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

After many months of enjoying my new bike club site (http://www.valleyspokesmen.org) I've decided that I want to abandon the semi-liquid display for now and explore a fixed-width site. While my skills are growing, I am not so sure of myself that I feel I can make major changes to my style sheet without risking a crash and burn. So I come seeking advice.

Currently when a visitor to my site clicks 'n grabs the right edge of their browser window and pulls to the right or left, the banner photo and title, five main drop-down links, and the center column all move accordingly. I'd like to assign a fixed width, like the old days when we just set the table to a width of 700px or something.

Below represents what I *think* are the key parts of my .css file.
#wholePage is a div that provides overall style. contentLeft, contentMain and contentRight are div's that represent the three columns that make up the pages.

Can you share how I might edit my style sheet so that my site is of fixed width? If the style info below is unsufficient, let me know and I can display the whole .css file, if you like.
Code:

#wholePage {
  font: 90%/1.1 trebuchet, arial, helvetica, serif; 
  width:96%; margin:0px auto; color:#333;
}
	
#contentLeft {
 float:left; width:180px; margin:0; padding:0 1em; 
 font-size:12px; border-right:1px solid #ddd;
}

#contentMain {
	 margin-left:200px; /* border-left:1px solid #ccc; */
	 margin-right:200px; /* border-right:1px solid #ccc; */
	 padding: 0 1em;
}

#contentRight {
	background: url(../images/bg_logoRt.png) repeat-y fixed top right;
 	float:right; width:180px; margin:0; padding:0 1em; font-size:12px; 
 	border-left:1px solid #ddd;
}
		
#footer {
	clear:both; margin:0; padding:0.5em; color:#333; 
	border-top:2px solid green;
}

Thank you very much for your valuable time.

First off I am entirely new to using CSS for anything other than some link and scroll bar decorations.

Secondly, this code does not (currently) validate but I think I can resolve those issues, but before I go to the trouble of appeasing a (forum) guideline and making sure the code validates I have some questions that may or may not prevent me from using the code or CSS all together.

The code (template/stle sheet) I am using is from http://www.code-sucks.com/css%20layouts/css-3-column-layouts/
the top question I have now is:

How can I seperate elements within the "header" section of this format?
i.e. within the "header I would like to place a logo to the far left + a slogan and also place an advertising banner? normally I would do this with three or more table cells.

would it compromise the benefit of switching from mainly table oriented pages to CSS by including "some" tables within the CSS sections?

Thanks for any insights and sorry if I have crossed any lines with this query.

This is driving me absolutely insane.
The transition from table designs to css designs is a brutal one, in case no one is aware. Table designs seem so much easier, but I guess I might as well be compliant.

Here's my problem:
All I need to do is have a three column box that has a select box in the left column, then two images vertically aligned in the middle within the middle column, and a second select box in the right column.

This would be incredibly easy with tables seeing that all I would need is:
Code:

<table>
   <tr>
      <td align="left">
         <select>
            <option>Option</option>
         </select>
      </td>
      <td valign="middle" align="center">
         <img src="picture1.jpg"/><br/>
         <img src="picture1.jpg"/>
      </td>
      <td align="left">
         <select>
            <option>Option 2</option>
         </select>
      </td>
   </tr>
</table>

I'm assuming that since it's this easy to do with tables and everyone is opposed to using tables for design, there must be an easier way using divs and the like. Please enlighten me, someone!