Layout Difficulties with monitor sizes

[irukandji]

I am coding a css layout for a custom design which needs to be a four column site where the last column (right) will expend automatically according to the size of the monitor not the content inside.

I have tried using many different techniques to accomplish this fixed/liquid, em, frames etc, but nothing I am creating is allowing the last column to expand as it is designed to.

height:768px; all columns.

width of column 1, 2, 3 are all different.

Column 4 width has been tried using a repeating image with min-width set. also using no fixed min-width and auto.

I know this should not be extremely difficult, but after four days of trying different things and calling a few of my coder friends I am still at a loss on how to make this work.

I can provide more information as requested and hope someone can help me figure this out.

Thanks,

[Snookerman]

Try this:
HTML:

<div>
  <div id="one">One one</div>
  <div id="two">Two two</div>
  <div id="three">Three three</div>Four four
</div>

CSS:

div div {
	float:left;
	height:768px;
}
#one {
	width:100px;
}
#two {
	width:200px;
}
#three {
	width:300px;
}

[irukandji]

I see that sometimes less is more here. I was trying to do something by using more divs than I needed.

Thanks.

Lining up the divs to the background is showing differences in browsers FF, IE (as if that is not an understatement)

Hopefully I've not fallen back into using more when less will do.

As it looks now:
http://brightpinkstudio.com/test


If I use the following

body	{
	background-image:url(cropped%20files/shared-images/background-col4.png);
	background-repeat:repeat-x;
	
}
div div {
	float:left;
	height:768px;
	width:100%;
}
#top	{
	width:100%;
	height:145px;
	background-image:url(cropped%20files/shared-images/background-wave.png);
	background-repeat:no-repeat;
	margin-bottom: -145px; /*used to allow the three divs to cover the background image*/
}	
#one {
	width:237px;
	background-image:url(cropped%20files/shared-images/background-col1.png);
	background-repeat:no-repeat;

}
#two {
	width:358px;
	background-image:url(cropped%20files/shared-images/background-col2.png);
	background-repeat:no-repeat;
	
}
#three {
	width:229px;
	background-image:url(cropped%20files/shared-images/background-col3.png);
	background-repeat:no-repeat;

}

<div>
  <div id="top"></div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

I'd like not to use the negative margin in the "TOP" div but still have the page align correctly with the background of the page.