CSS - Help With Layouts In Css

Well, I know CSS however I am a bit confused with fixed width and liquid layouts as far as I know fixed width is where you set a divs width in pixels and liquid is in % so it scales to the users screen size?

Which one is best to use? Also, I have the following style sheet which I created, I am guessing this is a liquid layout?

Code:

* {
margin: 0;
padding: 0;
}

body {
font-size: 15px;
background-color: black;
color: white;
}


#header {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid white;
}

#header h1 {
padding-left: 25px;
margin-bottom: 0px;
}

#content {
padding: 10px;
margin-left: 200px;
border-left: 1px solid white;
}

#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}

#nav {
float: left;
padding: 10px;
padding-left: 15px;
width: 20%;
}

#nav li {
list-style-type: none;
}

#nav a {
text-decoration: none;
}

#footer {
clear: left;
border-top: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid white;
width: 100%;
}

a {
color: silver;
text-decoration: underline;
}

a:hover, a:focus {
font-weight: bold;
}

a:visited {
font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
margin: 10px;
}

p {
margin: 5px;
}


select {
width: 30%;
}

textarea {
width: 40%;
}

.floatimage {
float: left;
margin: 10px;
}

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!

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.

I think it would answer a lot of questions if we make a list of cross browser css layouts.

I am going to post all of my submissions via http://www.blendedcodes.com so everyone can see a live demo and change the code around live. Please post your submissions via blendedcodes.com or a similar site that lets visitors interact with the code. This is all about everyone learning the css layouts... I'll compile them all and post the final list when I close the thread.

Centered body with left and right columns
http://www.blendedcodes.com/DTrzZ6In

Table made of floating divs
http://www.blendedcodes.com/CFwtV3S1