CSS: how to take up remaining width for the input textbox in the 100% width div?

Vote count:

0

There are two web controls (textbox & hyperlink) in one div.

The width of div containing these two web controls is 100%. The width of hyperlink is 20px. I want to set the width of textbox to take up the remaining width of the div.

For example, the width of textbox should be (100% - 20px). Assume that 100% width is 1000px. The result for the textbox's width should be 980px;

I wonder how to do it.

Width:auto cannot change the width of the input textbox.

<style>
 #ct100_searchbox_div {
    width:100%;
 }

 #ct100_searchbox_textbox {
    width:auto;
 }

 #ct100_searchbox_link {
    width:20px;
 }
</style>

<div id="ct100_searchbox_div">
  <input id="ct100_searchbox_textbox"></input>
  <a id="ct100_searchbox_link" href="">...</a>
</div>`

asked 1 min ago

goodmorning

1

1 Answer

Vote count:

0

Simple. Make it block.

#ct100_searchbox_div {
   display: block;
   width: 100%;
}

answered 44 secs ago

Praveen Kumar

28.8k