Things You Can’t Do With CSS

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?

3 Replies to “Things You Can’t Do With CSS”

  1. possibly you could do something like it with nested divs, but I can’t see it not being hella ugly.

  2. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.