Code: Select all
<div class='centerTop'>
<div class='centerTopLeft'></div>
<div class='centerTopMiddle'></div>
<div class='centerTopRight'></div>
</div>
Code: Select all
.centerTop{
width:100%;
height:15px;
}
.centerTopMiddle{
height:15px;
position:inherit;
width:auto;
display:inline-block;
background-color:#FFFFFF;
}
.centerTopLeft{
display:inline-block;
float:left;
height:15px;
width:15px;
background-image: url(../images/centerTopLeft.png);
background-position:left;
}
.centerTopRight{
display:inline-block;
float:right;
height:15px;
width:15px;
background-image: url(../images/centerTopRight.png);
background-position:right;
}
The primary wrapping div is variable in width and changes based on the layout of the page. The topRight and topLeft divs are always staying to the left and right respectively. my problem is topMiddle. I need that to fill whatever space exists between topRight and topLeft. for the life of me I cant get the middle div to work right. doing 100% covers the left and right divs. I tried using left and right as well as margins and padding to remove the 15px on with side but this doesnt work. all it does is move the entire width to the left or right.
any ideas?