How make input element take up available space next to a fixed width element?


Tags: html,css

Problem :

I'm having a bear of a time getting the following to work:

https://jsfiddle.net/1bq55L65/

I have a div element container, which needs to take up 100% of the available space of its parent. Then, inside it, I have a fixed-width element that needs to be pegged to the right. The remaining space to the left of the fixed-width element is to be filled with an input text field.

My understanding is that when I set the width of an element to 100%, it computes the actual width in pixels based on the width of its parent element (in this case, the div called expanding). The behaviour I'm seeing, however, seems to indicate it takes the width of the parent's parent (i.e. container)

Bonus question: how can I get the height of the fixed element to be the same height as the div it's contained in (i.e. container).

In either case, I'd rather avoid script if at all possible. It seems this should be a common enough requirement that CSS should accomplish it straight away.

Assume recent browsers, and in particular IE9 or later.



Solution :

Width is relative to the parent. The parent of the input is a div and by default divs are block level elements, with width 100%) so as the div is 100% of it's container (the #container div). The floating element #fixed has no influence on the width of #expanding in this situation.

Use a table layout or calculate the remaining space using calc:

#container {
    background-color:pink;
    width:100%;
    margin-top:60px
}

#fixed {
    width: 70px;
    text-align:center;
    float:right;
    background-color: #FFEEEE;
    height:100%;
    display:inline-block;
}

#expanding {
    background-color:#FFDDDD
}

#inputField {
    display:inline-block;
    width:calc(100% - 70px);
    box-sizing:border-box;
}
<div id="container">
    <div id="fixed">Fixed</div>
    <div id="expanding">
       <input id="inputField" type="text" value="Type here" />
    </div>
</div>

Clearly since by default input has some UA styles you'll need to either reset these or take them in consideration (also calc needs to be supported by the browsers you're targeting, see: http://caniuse.com/#feat=calc)..


    CSS Howto..

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    How to apply CSS generated by colorzilla to the body element [closed]

    how to choose correct css class to change element

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to use CSS in LWUIT framework?

    How to adjust responsive behaviour of menu bar's elements

    Vertical centering images within a slideshow using JS code?

    Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

    CSS: How to make input fill rest of line, with a button on the right?

    How to keep text in same position?

    how to place css div container “text-align: center ;”

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How to include a google map in an application

    How to get the first parent that has a certain CSS property using jQuery?

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    How to make the footer stick to the bottom?

    How to prevent conflicts between css rules

    How to set % height in fluid layout?

    How to use CSS' “rotateX()” with jQuery's animate() on multiple elements with delay

    3 column css how to make the columns even?

    How to not display common border between two adjacent divs?

    How to create 3d ribbon box in css

    How do I remove the padding between the content of the cell and the cell borders in a table? [duplicate]

    How to manage clashing third party CSS

    Can't figure out how to fix CSS for 3rd party library element

    How can I do width = 100% - 100px in CSS?

    How to hide specific TD borders in a TABLE using CSS

    how to create 100% vertical line in css

    With html tables, using CSS, how do I get the tables next to each other?

    How to transform Menu icon to Arrow icon? [closed]