I need to place content between the left and right columns, provided that the content block is higher than the left and right column blocks. I tried to use float: right; in the styles for the content, it only aligns the example in the figure.
How to center the content block between columns? My code is:
#left {
width:220px;
height:200px;
background:yellow;
float:right;
}
#content {
float:right;
}
#right {
width:220px;
height:200px;
float:left;
background:grey;
}<div id="main"><div id="content">Content</div><div id="left">left col</div><div id="right">right col</div></div>