0

I am trying to make the div with the input[type=text] fit the entire width of the remaining space in the InputDivMain. I don't know how to make the InputDivTitle div only as wide as its content, and no more. After fitting only the width of its content, I want InputDiv to fill the remaining gap, making the input inside it fill 100% of that div.

This is my HTML:

<div class='Segment'>
  <div class='DisplayTable InputDivMain' id='MainDiv_01'>
    <div class='DisplayTableCell InputDivTitle'>Search by ID</div>
    <div class='DisplayTableCell InputDiv'>
      <input class='w3-input' type='text'>
    </div>
  </div>
  <div>
    <input type="button" value="Search">
  </div>
</div>
<div class='Segment'>
  <div class='DisplayTable InputDivMain' id='MainDiv_02'>
    <div class='DisplayTableCell InputDivTitle'>Search by Number</div>
    <div class='DisplayTableCell InputDiv'>
      <input class='w3-input' type='text'>
    </div>
  </div>
  <div>
    <input type="button" value="Search">
  </div>
</div>

And this is my CSS:

.DisplayInline {
    display: inline-block;
}

.DisplayTableCell {
    display: table-cell;
  vertical-align: middle;
}

.DisplayTable {
    display: table;
}

.Segment {
    margin-bottom: 20px;
}

.InputDivMain {
    box-sizing: border-box;
    margin-bottom: 5px;
    border-bottom: 1px solid #009688;
    display: table;
    width: 100%;
}

.InputDivMain:hover {
    cursor: text;
}


.InputDiv {
    overflow: auto;
    border: 1px solid red;
    width: auto;
    box-sizing: border-box;
}

.InputDiv > input[type=text] {
    border-bottom: 0px;
    width: 100%;
}

.InputDiv > input[type="text"]:focus {
    outline: none;
}

.InputDivTitle {
    box-sizing: border-box;
    border: 1px solid green;
    color: #009688;
    font-size: 120%;
    padding-left: 5px;

}

input[type="button"] {
    width: 100%;;
}

Please help!

Edit: Sorry, I completely forgot to add my JSFiddle link. https://jsfiddle.net/ytsvzyc6/

Monil
  • 169
  • 1
  • 1
  • 11
  • While it's possible to have the left div be as wide as its contents and the right div to take up the rest, sizing the input in the right div to be as wide as its parent is tricky using CSS alone. Can you use JavaScript? – Mr Lister May 26 '17 at 15:02
  • Possible duplicate of [How to make div not larger than its contents?](https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents) – alessandrio May 26 '17 at 15:03
  • Yes, I can use JavaScript. How could I use JS to solve this? @MrLister – Monil May 26 '17 at 15:42

2 Answers2

1

you should put

The float causes the element to occupy only its content
The overflow: hidden; causes the next content to occupy the remaining space

.InputDivTitle{
  float: left;
}
.InputDiv{
  position: relative;
  overflow: hidden;
}

see JSFiddle

alessandrio
  • 4,282
  • 2
  • 29
  • 40
  • Thanks! This did make it work, however, because there is a float, the text in the `InputDivTitle` now sits at the top of the `InputDivMain`, not vertically at the center. I tried adding `display: inline-block` and `vertical-align: middle` to the `InputDivTitle` class, but that does not seem to be working. Could you help with that? – Monil May 26 '17 at 15:34
  • you can use `line-height` prop – alessandrio May 26 '17 at 15:49
0

You can set the display to inline-block for the divs you want to have tight against their inner content.

display: inline-block

How to make div not larger than its contents?

ChekTek
  • 175
  • 2
  • 10