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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With