Как я могу иметь такие столбцы в CSS? (образ)

Question

Может кто-нибудь, пожалуйста, дайте мне знать, как я могу сделать это в CSS?

РЕДАКТИРОВАТЬ

Три столбца будутсодержать текст.Мне нужно, чтобы черный ящик был фиксирован по размеру, а две колонки фуксии увеличивались по мере необходимости. Конечно, текст не должен быть скрыт слева и справа из-за черного ящика. Мне нужно, чтобы он был обернут вокруг черного ящика с обеих сторон.

Answer 1

Как насчет этого?

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

Закругленный угол будет работать в браузере, отличном от IE, если вы хотите, чтобы закругленный угол в IE был следующим: 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;
}

Answer 2

Вот CSS-представление вашего изображения, но без знания ожидаемого начального масштаба и того, как вы ожидаете, что контент будет переформатирован в этих столбцах, этот CSS не будет вам очень полезен.

• Демонстрация в реальном времени: http://jsfiddle.net/Marcel/PMY7S/2/

HTML:

<div id="wrap">
    <div class="col lft"></div>
    <div class="col"></div>
    <div class="col top"></div>
</div>

CSS:

div { border-radius:1em; }
.col { float:right; width:45%; height:30em; background:#ff3ca0; }
.lft { margin:0 0 0 10%; }
.top { top:5em; left:-5em; width:10em; height:15em; margin:0 0 0 50%; background:#333; position:absolute; }
#wrap { width:20em; margin:1em auto; }