How to divide a div into percentages, but leave one value of the constant width of the div on the left

Question

I have 4 boxes, I want box1 to have a width of 50 pixels on the left side of the screen, and the three remaining fields should fill the rest of the screen, they need to be changed. How can I achieve this?

http://jsfiddle.net/DBnSp/

.box1 { width: 50px; height: 100px; background: red; float: left; } .box2 { width: 25%; height: 100px; background: yellow; float: left; } .box3 { width: 25%; height: 100px; background: blue; float: left; } .box4 { width: 25%; height: 100px; background: green; float: left; } 

Answer 1

You can use calc () to do this:

Jsfiddle

 width: calc((100% - 50px) / 3); 

This works well for this scenario, but if you have a lot of fixed values, it can get a little complicated. Basically, it calculates the space you want to fill (100% of the screen, minus 50 pixels for the first window) and divides it into 3 parts.

Understand that calc () is part of CSS3 and is not universally supported. Here is a good site to see which browsers support it: http://caniuse.com/#feat=calc

Answer 2

You can wrap the width DIV as a percentage inside an external DIV that has a fixed left margin.

http://jsfiddle.net/DBnSp/1/

 <div class="box1"></div> <div class="box-right"> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> .box1 { width: 50px; height: 100px; background: red; float: left; } .box-right { margin-left: 50px; } .box2, .box3, .box4 { width: 33.33%; height: 100px; float: left; } .box2 { background: yellow; } .box3 { background: blue; } .box4 { background: green; } 

Answer 3

This can be done using the display tables, you can set the first div to a fixed width and let the rest of the div evenly distribute the remaining space! First, create a wrapper width display:table and width:100%; (or any other width)

 .wrapper { display: table; width: 100%; table-layout: fixed; } 

Now check the boxes in display:table-cell

 .stretch { display: table-cell; } 

And lock the first width to a fixed width

 .box1 { width: 50px; height: 100px; background: red; } 

Fiddle

http://jsfiddle.net/DBnSp/4/

No floating, no interest and very well maintained!