Width calculation input

Question

How to do like this, as shown in the picture, but instead of div B , will input be located?

Container as a div , contains two divs .

div A , has a fixed width.

width div B , must be calculated as a percentage of the remaining free space.

it

<div style="width: 50%; background-color: green; margin: 0 auto; margin-top: 30px;"> <div style="float: left; height: 32px; width: 32px; border-radius: 5px 0 0 5px; background-color: red; "></div> <div style="height: 32px; width: 98%; border-radius: 5px 0 0 5px; background-color: #EEEEEE;"></div> </div>

BUT if you use instead of DIV B , input, it is not calculated as a div

 <div style="width: 50%; background-color: green; margin: 0 auto; margin-top: 30px;"> <div style="float: left; height: 32px; width: 32px; border-radius: 5px 0 0 5px; background-color: red; "></div> <input style="display: block; height: 32px; width: 98%; border-radius: 5px 0 0 5px; background-color: #EEEEEE;" type="text" size="20" placeholder="test"> </div>

@Igor Tkachuk The fact is that without input, everything works well.
But if you insert it, it will begin to be calculated differently, from the total width.
If you use calc, the calculation will also not be accurate, and input will shift down due to lack of space.

Qwertiy ♦ Qwertiy 76.2k 17 73 200 · Accepted Answer · 2016-02-29T15:45:30

 * { box-sizing: border-box; } .wrapper { width: 50%; outline: 1px dotted red; margin: auto; } .wrapper > div { display: table-cell; width: 0; } .wrapper > div:last-child { width: 100%; } span { display: inline-block; width: 30px; height: 30px; background: green; vertical-align: middle; } input { width: 90%; }

 <div class=wrapper> <div><span></span></div> <div><input></div> </div>

So really great, at least I haven't found any minuses yet) Thank you!
When writing css styles, do you use any program like Adobe Dreamweaver CC or the like?
And one last question if you can: If you have something like your own bootstrap?
I don’t even know what to compare with ... What do you think such a program should help?

Answer 2 · 2016-02-29T15:31:58

Use the calc function. For example:

 .a { height: 400px; background: red; font-size: 0; /*для отображения текста в блоках не забудьте задать размер шрифта им.*/ } .b, .c { display: inline-block; /* можно использовать свойство float */ vertical-align: top; } .b { width: 200px; outline: 3px solid green; height: 400px; } .c { width: calc(80% - 200px); /* расчет ширины */ outline: 3px solid blue; height: 400px; }

 <div class="a"> <div class="b"></div> <div class="c"></div> </div>

http://htmlbook.ru/css/calc

Option and input:

 .a { height: 50px; background: red; font-size: 0; /*для отображения текста в блоках не забудьте задать размер шрифта им.*/ line-height: 50px; } .b, c{ display: inline-block; /* можно использовать свойство float */ vertical-align: top; } .b { width: 50px; outline: 3px solid green; height: 50px; } .c { width: calc(80% - 200px); /* расчет ширины */ outline: 3px solid blue; height: 50px; }

 <div class="a"> <div class="b"></div> <input class="c" type="text"> </div>

And the question was about - Calculation of the width of input
that question that I read was about divas, now we will do the input ....

Answer 3 · 2016-12-31T10:51:28

Description of the question and the image has a different meaning. The example below focuses on the description and it contains the basic principle of the universal solution, which you yourself can easily supplement with the necessary properties:

 .divMain:after { content: ''; display: block; clear: both; } .divA { float: left; width: 300px; } .divB { overflow: hidden; } .divB input { width: 100%; /* Reset CSS */ box-sizing: border-box; margin: 0; /* End Reset CSS */ }

 <div class="divMain"> <div class="divA"> Какой-то важный контент. </div> <div class="divB"> <input type="text" placeholder=""> </div> </div>

PS I note that .divA should not be empty, and if it is assumed that it may not have content, add it with the min-height property: 1;

PSS In some browsers, input may go beyond the container due to default styles (margin and incorrect border-box value) - this is easily corrected by zeroing styles, for example godlike.css . If you have already redefined default styles in global project styles, I advise you to remove the Reset CSS block.

Answer 4 · 2017-01-01T06:24:22

You can also use flexbox. We assign one element a fixed width, and the second one flex-grow: 1 , forcing it to occupy the remaining space. This way unlike float

ensures that items are on the same line
allows content to have a dynamic height ( height: auto; ) and adjacent elements of the container will adjust to it as a table
requires much less code and does not need hacks like float , clearfix and overflow .

Code example:

 * { /* Чтобы задать ширину и высоту, вкючая padding и border */ box-sizing: border-box; } body { margin: 0; } .container { display: flex; width: 50%; } .fixed { width: 30px; } .fluid { flex-grow: 1; } .fluid > input[type="text"] { width: 90%; }

 <div class="container"> <div class="fixed"> 30px </div> <div class="fluid"> <input type="text" /> </div> </div>

Sorry, I confused you there and answered as if the author of the answer.

lexxl lexxl 5,051 2 13 35 · Answer 5 · 2016-02-29T15:35:33

Offhand like this. The basic idea is to use the calc function: width: calc(100% - 30px - 10%);

 .main { background: #000; width: 200px; height: 50px; } .one { display: inline-block; background: red; width: 30px; height: 30px; } .two { display: inline-block; width: calc(100% - 30px - 10%); height: 30px; }

 <div class="main"> <div class="one"></div> <input type="text" class="two" /> </div>

@YuriSvetlov, because the correct formula (100% - 30px) * 0.9 .

Width calculation input

5 answers 5

More articles: