CODEWITHSUNDEEP
javascriptjquerycss
stack
stack

Reputation: 10218

How can I set rest of width to a right float element?

All I'm trying to do is setting width: {the rest of width} to an element which has float:right property. Here is my code:

.wrapper{
  border: 1px solid;
  padding-left: 10px;
}

.fix{
  border: 1px solid blue;
  width: 80px;
  display:inline-block;
}

.rest{
  float: right;
  border: 1px solid red;
}
<div class='wrapper'>
    <div class='fix'> fix width </div>
    <div class='rest'> it should has both right float and the rest of width</div>
</div>

How can I fill that gap? This is expected output:

enter image description here

Upvotes: 1

Views: 42

Answers (3)

Nope
Nope

Reputation: 22329

Not sure how flexible you are on the CSS but if you use float:left on the fixed div you can use overflow:auto on the right one.

.wrapper{
  border: 1px solid;
  padding-left: 10px;
}

.fix{
  border: 1px solid blue;
  width: 80px;
  display:inline-block;
  float: left;
}

.rest{
  border: 1px solid red;
  overflow: auto;
}
<div class='wrapper'>
    <div class='fix'> fix width </div>
    <div class='rest'> it should has both right float and the rest of width</div>
</div>

If you need to float the actual content of the right div then still to the right, you could add a content container to float right within.

.wrapper{
  border: 1px solid;
  padding-left: 10px;
}

.fix{
  border: 1px solid blue;
  width: 80px;
  display:inline-block;
  float: left;
}

.rest{
  border: 1px solid red;
  overflow: auto;
}

.right-content{
  float:right;
}
<div class='wrapper'>
    <div class='fix'> fix width </div>
    <div class='rest'><div class="right-content"> it should has both right float and the rest of width</div></div>
</div>

Upvotes: 1

Kiran Reddy
Kiran Reddy

Reputation: 764

Apply width in %

.fix{ 
      border: 1px solid blue;     
      width: 20%;     
      display:inline-block;    
      float:left;
}
 .rest{ 
      float: right; 
      border: 1px solid red; 
      width:80%; 
}

Upvotes: 0

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

Use calc to subtract the value.

.rest{
  float: right;
  border: 1px solid red;
  width: calc(100% - 80px);
}

Upvotes: 1

Related Questions