Width auto with the second element filling the remaining space

Asked

Viewed 41 times

1

I have the code below:

.segura{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.label{
  width: 90px;
  height: 20px;;
  float: left;
  background-color: #6fccdd;
}
.campo{
  width: calc(100% - 90px);
  height: 20px;
  float: left;
  background-color: #999999;
  border: solid 0px transparent;
  padding: 0px;
}
<div class="segura">
  <label class="label">nome</label>
  <input value="" type="text" class="campo">
</div>

If I set a width for the LABEL, it works, but how to do the same effect by putting width: auto; for the LABEL and the FIELD fill all the remaining space?

css

  • Cara I didn’t understand what you want to do... the label already has a size and the input already occupies the rest.... what you are intending to do, or what behavior you want to do with respect to width, it is not clear

  • They already answered what I needed, but answering their question: I want to be able to put width: auto; no label, because each label will have a different word (name, email, message, etc..)

1 answer

1


Use display: flex in the main div and place flex: 1 in the field. Note that I have eliminated some properties, such as the float: left and the width field and label. The flex: 1 causes the element to occupy the rest of the area. Place display: block in div is also redundant because Divs are already block. You don’t have to put width: auto, because the width already is auto by default. Just omit it. Put width: 100% also does not need, because the div already occupies 100% of the width. See:

.segura{
  /*width: 100%;*/
  height: auto;
  display: flex;
  margin: 0 auto;
}
.label{
  /*width: 90px;*/
  height: 20px;;
  /*float: left;*/
  background-color: #6fccdd;
  padding-right: 10px;
}
.campo{
  /*width: calc(100% - 90px);*/
  height: 20px;
  /*float: left;*/
  background-color: #999999;
  border: solid 0px transparent;
  padding: 0px;
  flex: 1;
}
<div class="segura">
  <label class="label">nome</label>
  <input value="" type="text" class="campo">
</div>
<div class="segura">
  <label class="label">endereço</label>
  <input value="" type="text" class="campo">
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.