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 make a image css not move at text?

    CSS: how do I position my slideshow counter up into the slideshow

    How to detect css properties in div

    How to center text horizontally & vertically within dotted border

    How to remove or hide element using jquery or css

    How design an unordered list of images horizontally with Bootstrap?

    How can I make a button change its position after being clicked?

    How to add section numbers (1.2, 3.4.1) automatically using CSS?

    How to get a list of valid values for a CSS property with javascript?

    How to bind click event on image added using CSS 'background-image' property in jQuery

    How to import Google Web Font in CSS file?

    How to fix animation problems css3

    How insert value from Ruby in CSS file

    CSS : How to remove margin between
  • How to achieve navigation mouseover effect like in screenshot [closed]

    How to mask an SVG within a div?

    Rotation of a div gives a black background on IE, how can I remove it?

    How to achieve “paper-like” background effect? [closed]

    How to give priority to a div in terms of overlapping divs on a drop down menu?

    How can I apply a style to a div using CSS as long as that div does NOT contain an element with a certain id?

    How can I add pagination to my site's gallery?

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    CSS/PHP: How to make the next div appear on the side instead

    How can I align a text that has a specific width at the center of a div?

    Limit number of lines shown in a textbox, but not limiting the user to write

    How to align text in the following way using css / html?

    How to pause a CSS keyframe animation when it ends the first cycle?

    How to design a web page with multiple color panes without tables [duplicate]

    How to create an href that opens a div on screen? [closed]

    How to “reset” a DOM subtree's CSS style?