HTML div auto width

Question

I have a container div and 3 inner divs that places them all in one row. The side divs have fixed width and I want auto width for the middle div. This is my code:

<div style="width: auto; height: 25px; position: relative; float: right;">
    <div style="width: 25px; height:25p; float: right; position: relative; display:inline-block;">
    <div style="width: auto; height: 25px; position: relative; float: right; display:inline-block;"></div>
    <div style="width: 25px; height:25p; float: right; position: relative; display:inline-block;">
</div>

...but middle div doesn't take any space.

note: I don't want the container div to have fixed or percentage size.

What is the solution?

Answer 1

You are not closing off the first and last div within the container. You need that. I made a jsFiddle, I think it is what you need. Here is the code:

<style>
div {
    width: auto;
    height: 25px;
    position: relative;
    float: right;
}
div div {
    float: left;
    display:inline-block;

}
div div:first-child {
    float: left;
    width: 25px;
}
div div:last-child {
    width: 25px;
    float: right;
}
</style>

<div>
<div>1</div>
<div>This is the second and middle div.</div>
<div>3</div>
</div>