Question

I’ve searched for this everywhere but I can’t seem to find a solution; maybe it’s just easy as hell but I don’t see it. I have a banner across the top of my page with a logo in the middle. On the left and the right of this logo, I need two (different) x-repeating background images. Like so:

<div class="banner_container">
  <div class="banner_right"></div>
  <div class="banner_logo"></div>
  <div class="banner_left"></div>
</div>

All the style I know in advance is the following:

div.banner_container {
  height: 60px;
  width: 100%;
  text-align:center;
}
div.banner_right {
  height: 60px;
  float:right;
  background: url(img/banner_right.png) repeat; /* This is a  */
}
div.banner_left {
  height: 60px;
  float:left;
  background: url(img/banner_left.png) repeat;
}
div.banner_logo {
  height: 60px;
  width: 500px;
  margin: 0px auto;
  background: url(img/banner.png) no-repeat center;
}

I need the logo to go in the center and the left and right portions to fill up all remaining space left and right. How could I achieve this?

Answer 1

Just to point out another solution, using position absolute http://jsfiddle.net/Khez/yVhsY/, since I generally dislike using float.

There are multiple ways to handle this kind of request.