Moving from 5 cols to CSS

Problem wirh round corner

[henry0]

I try to move from a regular table 5 cols layout to a 100% CMS design:

Header
left-col, round-corner, main-center-col,round-corner,right-col

My requirements are to keep the design fluid.
and to keep without space indeed the left col and its round corner. Same for left col and round corner.

it goes as follow but CANNOT MAKE RIGHT CORNER AND RIGHT COL WITHOUT SPACE IN BETWEEN
although the left side goes fine.

body {
margin:0px 0px 0px 0px;
padding:0px;
height:100%;
color:#000000;
height:100%;
}

#mainleft {
width:20%;
float:left;
background:#f5f5f5;
padding-bottom:0px;

height:100%;
}

#mainleft_2 {
width:5%;
float:left;
background:#fff;
padding-bottom:0px;

}

#maincenter {
width:60%;
float:left;
background:#ffffff;
padding-bottom:0px;

height:100%;
}

#mainright_2 {
width:5%;
float:left;
background:#fff;
padding-bottom:0px;

}

#mainright {
width:10%;
float:left;
background:#f5f5f5;
padding-bottom:0px;

height:100%;
}

What do I miss?
thanks

[coopersita]

I think your main problem is that you are using css, but stil thinking like tabled layout.

You don't need 5 colums, you need 3. The round corners should be backgrounds of the center column.

header
left-col center right-col

You could nest 2 divs in the center and apply a corner each.

If you go to A List Apart (online magazine) they have an article that explains how to do it (just search for round corners).

[edited by: createErrorMsg at 6:44 pm (utc) on Dec. 11, 2005]

[henry0]

Thanks
You are right on the spot, still thinking the same old way!
your suggestion makes sense
I will investigate it