How do I make a floating div fixed width while the other two floating div in percentage?

Question

Say I have 3 divs like this:

#wrapper {width:100%; border:1px solid #ccc}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {width:30%}
#wrapper #second {width:70%}
#wrapper #third {width:30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

What I want:

The 3 divs all floating in a row in a flexible container;
The width of 3rd div is always a fixed value, like 30px;
The first and second div has width in a percentage value, to use the rest room of the container.

For instance, if the container is 100px, the 3rd div is 30px and the first is (100-30)*30% = 21px, the second is (100-30)*70% = 49px.

What is the correct way to do this?

Thanks

consider reading *all* the answers and you will find *all* the possible ways with and without float — Temani Afif, Mar 16 '20 at 12:48

score 1 · Answer 1 · answered Mar 16 '20 at 02:43

You can use calc:

#wrapper {width:100%; border:1px solid #ccc}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {width:calc(30% - 30px)}
#wrapper #second {width:calc(70% - 30px)}
#wrapper #third {width:30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

If you want, you can use a css variable to not have to write 30px three times.

score 0 · Answer 2 · answered Mar 16 '20 at 02:51

You don't have to use width calculation for this. you can do something like this.

you can also do max-width to the selector class which you want keep varying the size dynamically and you can freeze the size of your last block i.e. third div.

#wrapper {width:100%; border:1px solid #ccc}

#wrapper #first{
width:30%;
display:inline-block;
border:1px solid red;
}
#wrapper #second{
width:60%;
display:inline-block;
border:1px solid teal;
}
#wrapper #third{
width:30px;
display:inline-block;
border:1px solid blue;
}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

score 0 · Answer 3 · edited Mar 17 '20 at 00:59

0

#wrapper {width:100%; border:1px solid #ccc}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {width:calc(30% - 15px)}
#wrapper #second {width:calc(70% - 15px)}
#wrapper #third {width:30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

edited Mar 17 '20 at 00:59

halfer

19,824
17
99
186

answered Mar 16 '20 at 02:52

vadivel a

1,754
1
8
18

When posting a possible solution, consider adding an explanation as to why it might help. This will make the question and answer more useful for future readers, who may want to learn from it as well. – halfer Mar 17 '20 at 00:59
Incidentally, I have removed "hope this helps" from your text, since there is a preference on Stack Overflow for technical writing. Everyone hopes their answer helps, so it is quite redundant. Please refrain from adding this (and any other conversational material) if you can. – halfer Mar 17 '20 at 01:01

score 0 · Answer 4 · answered Mar 16 '20 at 03:19

#wrapper {width:100%; border:1px solid #ccc; display: flex}
#wrapper div {box-sizing: border-box; float:left; border:1px solid #777}
#wrapper #first {flex-basis: 30%}
#wrapper #second {flex-basis: 70%}
#wrapper #third {flex-basis: 30px}

<div id="wrapper">
  <div id="first">A</div>
  <div id="second">B</div>
  <div id="third">C</div>
</div>

Another way to achieve this using flexbox. Hope this helps.

How do I make a floating div fixed width while the other two floating div in percentage?

4 Answers4