CODEWITHSUNDEEP
htmlcss
Monil
Monil

Reputation: 169

How to make div width only to fit its content and the next div to fill the remainder?

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/

Upvotes: 0

Views: 1663

Answers (2)

alessandrio
alessandrio

Reputation: 4370

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

Upvotes: 1

ChekTek
ChekTek

Reputation: 174

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?

Upvotes: 0

Related Questions