How to make these elements all sit side by side with 100% width

Question

I have 3 background images that I want to sit side-by-side with the middle one taking up a variable amount of space. I can get the first 2 images to work, but the 3rd breaks on a new line.

Just to be clear, I need the left and right divs to have a fixed width, and the middle div to take up 100% - 50px (25px for the left and right divs in this case).

This answer got my to my current solution.

Current outcome:

enter image description here

HTML:

<div class="wrap">
    <div class="left"></div>
    <div class="inner">
        <p>Text goes here</p>
    </div>
    <div class="right"></div>
</div>

CSS:

.wrap {
    position:relative;
    width:100%;
    overflow:hidden;
}
.wrap .left {
    background:url(../img/banner_small_left.png) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:left;
}
.wrap .inner {
    background:url(../img/banner_small_mid.png) 0 0 repeat-x;
    height:123px;
    overflow:hidden;
}
.wrap .right {
    background:url(../img/banner_small_right.png) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:right;    
}

score 1 · Accepted Answer · answered Jun 21 '14 at 18:34

Here is one way to achieve your layout using floats.

You need to modify the order of your child elements in your HTML:

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="inner">
        <p>Text goes here</p>
    </div>
</div>

Place the two floated elements ahead of your in-flow .inner div.

Use the following CSS (essentially your original one):

.wrap {
    position:relative;
    width:100%;
    overflow: auto;
}
.wrap .left {
    background:url(http://placekitten.com/100/150) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:left;
}
.wrap .inner {
    background: red url(http://placekitten.com/900/150) 0 0 no-repeat;
    height:123px;
    overflow: auto;
}
.wrap .right {
    background:url(http://placekitten.com/120/150) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:right;    
}

See demo at: http://jsfiddle.net/audetwebdesign/8M39e

works beautifully, thank you. i was having trouble getting the inner image to actually repeat using the other methods, but this works just as needed. — itsclarke, Jun 21 '14 at 18:36

score 0 · Answer 2 · answered Jun 21 '14 at 18:30

Using table and table-cell property you can easily fix this one. Updated your CSS like below.

 .wrap {
position:relative;
width:100%;
overflow:hidden;
display:table;
table-layout:fixed;
}
.wrap .left {
background:#ff00ff url(../img/banner_small_left.png) 0 0 no-repeat;
width:25px;
height:123px;
float:left;
display:table-cell;
}
.wrap .inner {
background:url(../img/banner_small_mid.png) 0 0 repeat-x;
height:123px;
display:table-cell;
overflow:hidden;
 }
.wrap .right {
background:#fff000 url(../img/banner_small_right.png) 0 0 no-repeat;
width:25px;
height:123px;
float:right;    
display:table-cell;
}

DEMO

How to make these elements all sit side by side with 100% width

2 Answers2