, the size of which varies depending on the width of the page....">
Geek asks and answers

Make HTML stretch to fill space in container

There is an element <div id="MyDiv">, the size of which varies depending on the width of the page. It contains elements <input>and <a>.

How can I make the alignment <a>on the right side <div>and stretch <input>so that it matches the free space between the left side <div>and the right side <a>?

In addition, <a>should not go to the next line, and for the container are also defined min-widthand max-width. Here is the code:

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">
    <input type="text" id="MyInput"/>
    <a id="MyButton" href="#">Button</a>
</div>

and demo .

+7
source share
5 answers

CSS3, IE9 . IE10 - Internet Explorer, . Flexible Box.

div {
  background: #AAAAAA;
  width: 100%;
  min-width: 300px;
  max-width: 600px;
  display: -webkit-flex;
}

input {
  -webkit-flex: 1;
}

a {
  margin: 0 10px;
}
<div>
  <input type="text" />
  <a href="#">Button</a>
</div>
Hide result
+11

jQuery . :

$( window ).bind("resize", function(){
    fitInput();
});
//resize on window change

$(document).ready(function(){
   fitInput(); 
});
//resize after loading

function fitInput(){
    var divW = $("#MyDiv").width();
    var buttonW = $("#MyButton").width();
    $("#MyInput").width(divW - buttonW - 10);
}
//resize function

Fiddle: http://jsfiddle.net/Burnacid/aGHqV/4/

+1

You can use absolute positioning:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
            <div id="MyDiv" style="position:relative;background:#AAAAAA; min-width:300px; max-width:600px;padding:0px 2px">
                <input type="text" id="MyInput" style="padding:0px;margin:0px;border:0px;width:100%;"/>
                <a id="MyButton" href="#" style="position:absolute;right:0px;top:0;padding:0px 2px; background:#aaa;">Button</a>
            </div>
        <body>
</html>

http://jsfiddle.net/uPZcW/

0
source

try this html:

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;">

       <input type="text" id="MyInput" style="width:74%;float:left"/>

       <a id="MyButton" href="#"  style="width:24%;float:right">Button</a>

  </div>
-1
source

Just add this to your tag <head>

input{width:92%;}
-4
source

More articles:


All Articles