We spent some time looking at this yesterday and found it surprising.
We wanted to create a set of three divs where the size of none is of a fixed width. The left and the right should expand to match the size of the content. And the middle div should pick up the slack and make the whole thing as wide as the page. The middle div needs to also contain a search box (input) that stretches out to fill the div.
<div class="left">Some variable content here</div>
<div class="middle">
<input type="text" class="text">
</div>
<div class="right">Some other variable content here</div>
Apparently it can’t be done without tables (which messes up our responsive design). We tried floats and relative positioning.
It was interesting to me that this literally couldn’t be done. Or can it?
possibly you could do something like it with nested divs, but I can’t see it not being hella ugly.
You can do this by changing the nature of the divs from block element to inline-block.
Meera – this results in the entire set being left-aligned within the containing div rather than the middle div taking up the available space.
<style>
.container {
display: inline-block;
}
.top {
background: gray;
width: 960px;
}
.left {
background: green;
}
.right {
background: blue;
}
.middle {
background: pink;
}
</style>
<div class=”top”>
<div class=”container left”>Some variable width content</div>
<div class=”container middle”><input id=”input”></div>
<div class=”container right”>Some other variable width content</div>
</div>
Or did you mean something else?