3 columns layout with rounded corners - css

Question

I'm trying to make something looks like this:
http://student.santarosa.edu/~anarbuto/CSS/templates/stylin2_chapters/chapter_5/3_col_rounded.html
but without any JS or CSS hacks.
Also tried this:
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm
and many other examples, but none of them works well.
I'd like the left and the right columns to be a fix width (say 300px), and the middle column takes the rest of the page.
Not sure if anyone can help..?
Thanks!!!
Edit: They need to be of same height (without specifying the height), ie. all 3 columns should have same height as the tallest column.

Answer 1

To make the corners of div round you have to use css and just go to
http://www.w3schools.com/css3/css3_borders.asp
This is not a hack I believe.

Answer 2

EDIT:
For your layout to be fluit I added % to the width:
http://jsfiddle.net/qBH3A/3/
CSS:
h1{
padding: 0;
margin: 0;
text-align: center;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0;
background-color: grey;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
#header{
background-color: green;
width: 100%;
margin: 0 auto;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#left{
background-color: yellow;
float: left;
width: 20%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#right{
background-color: blue;
float: right;
width: 20%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#center{
background-color: red;
width: 58%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
float: left;
margin-left: 10px;
}
I made a quick example for a 960px grid layout:
http://jsfiddle.net/qBH3A/1/
I just set the values to a max-width and width.
HTML:
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>right</h1>
</div>
<div id="center">
<h1>center</h1>
</div>
</div>
CSS:
h1{
padding: 0;
margin: 0;
text-align: center;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0;
background-color: grey;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
#header{
background-color: green;
width: 100%;
margin: 0 auto;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#left{
background-color: yellow;
float: left;
width: 200px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#right{
background-color: blue;
float: right;
width: 200px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#center{
background-color: red;
width: auto;
max-width: 540px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
Note that I used border-radius of 10px;
Hope this is what you want.