Question

I want use three div to create a round effect,like

<div class="wrapper">
   <div class="left-corner"></div>
   <div class="center-repeat"></div>
   <div class="right-corner"></div>
</div>

the .left-corner and .right-corner have a only corner background image
css:

.wrapper
{
   width:100%
   height:110px;
}
.left-corner
{
   background:...
   width:110px;
   height:110px;
   float:left
}
.right-corner
{
   background:...
   width:110px;
   height:110px;
   float:right
}

but how should I render the middle div
I tried use width:100% but the corner div will be push and become another row
how can I set the three div in a line and look normal?

Answer 1

If your wrapper is set in percentages, then I would think it best to keep it’s children in percentages as well, perhaps use a 33%, 33% and 34% to get the 100%. For the middle, or center-repeat I think you may need to use float: left as well, so it snugs up to the left-corner.