Question

I have following markup:

<div class="container">
    <div class="left-rect"></div>
    <div class="text">Lorem ispum</div>
    <div class="right-rect"></div>
</div>

.left-rect,
.right-rect { 
    background-color: #EEE;
    width: 9px;
}
.container {
    background-color: #555;
    height: 20px;
}

I want it to looks like:

And, what is important: .rect’s width have to depend on .text width, which is automatically adjusting to size of its content.
So, if I’ll put longer text into .text, the .rect should be wider, and left and right rects shoud be still on the edges. The .rect div can be placed anywhere (by js).
And I’ve got completely no idea how to do it.
I hope you’ll understand what i wrote.

Answer 1

Use display: inline-block for div

CSS:

.rect { 
    background-color: #EEE;
    width: 9px;
    height: 13px;
}

.container {
    background-color: #555;
    width: 165px;
    padding: 2px 5px;
    height: 20px;
    line-height: 20px;
    display: block;
}

.rect, .text {
    display: inline-block;
}

.text {
    color: #EEE;
    margin: 0 30px;
}

LIVE DEMO