Question

Can Someone please let me know how can I have this done in CSS?

EDIT

The three columns will contain text. I need the black box to be fixed in size and the two fuchsia columns to expand as needed. Of couse the text shouldn’t be hidden in the left and right one because of the black box. I need it to be wrapped around the black box from both sides.

Answer 1

How about something like this?

http://jsfiddle.net/ffb55/2/

The rounded corner will work in non-IE browser, if you want the rounded corner in IE, follow this example: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

HTML

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

CSS

#left {
 float:left;   
 width:50px;
 height:100px;
 background-color:pink;
}

#right {
 float:left;   
 margin-left: 10px;
 left: 100px;
 width:50px;
 height:100px;
 background-color:pink;
}

#center {
  position:absolute;
  left:40px;
  top: 20px;
  width:50px;
  height:50px;
  background-color:black;

}

#left, #right, #center {
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}