One div with 100% width and two fixed divs in one line

Question

I need three divs on one line.

One of them is 200px in size, the second is 300px, and the last div should be what is left.

Why is my last div on a new line?

<div style="float: left; width: 200px; background: #223355">a</div> <div style="float: left; width: 300px; background: #223344">b</div> <div style="float: left; width: 100%; background: #334455">c</div> 

Answer 1

Others said that 100% is 100% of the page width. But I don’t agree with the user who says that this cannot be done using “plain” CSS

 <div style="float: left; width: 200px; background: #223355">a</div> <div style="float: left; width: 300px; background: #223344">b</div> <div style="overflow: hidden; background: #334455">c</div> 

Answer 2

Because by specifying width: 100% , you told the third div fill the entire width of the page, and not just what was left. By adding a couple of shells to div s, you can get something like this:

 <div style="float: left; width: 100%"> <div style="margin-left: 500px; background: #334455">c</div> </div> <div style="float: left; width: 500px; margin-left: -100%"> <div style="width: 300px; float: left; background: #223355">a</div> <div style="width: 200px; float: right; background: #223344">b</div> </div> 

Which should look the way you want.

Answer 3

Is it not necessary to simply remove float: left; on the last div for it to work?

Answer 4

Because you set it to 100% width. Relative width, such as your percentage, refers to the width of the PARENT element. Therefore, if your container for these 3 sections was 600px, then you will get your third div, taking 100% 600px, and not the "remaining" space spent by the other two elements.

What you want cannot be done with simple CSS. You will need to calculate the remaining space using Javascript and set the third width of the div as well as make it a fixed width.