浮动div 100％宽度

Question

I'm using the Foundation framework and I want to make a navigation which takes 100% width of the grid class.

I have 3 divs: .header_beg , .header_rep , .header_end

.header_beg is 2px width , float: left and the .header_end also

But I want header_rep to be 1px width and to repeat-x till it fills 100% of the grid class. But it also need it to be float: left , but with float: left it's not visible. I haven't set width because I want it to be 100% of the grid class.

background: red;
height: 49px;
margin-left: 2px;

Here's a fiddle: http://jsfiddle.net/WFVER/

I need the green divs to be at the beginning and at the end of the red one, and simultaneously the 3 divs to be 100% width of the grid class.

Answer 1

You can do this with floats but instead of doing it via floats, I will show you how to do this with absolute position:

HTML

<div class="header">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS

.header {
  width: 1000px;
  height: 20px;
  position: relative;
}
.header .left {
  width: 1px;
  left: 0;
  height: 20px;
}
.header .right {
  width: 1px;
  right: 0;
  height: 20px;
}
.header .middle {
  width: 998px;
  background: url(images.png) repeat-x;
  left: 1px;
  right: 1px;
  height: 20px;
}