Percentage width diffs followed by a fixed width div

Question

I am trying to achieve the following layout using CSS and HTML:

_____________________________________________________________________________ | div1 33% | div2 33% | div3 33% | div4 200px | ————————————————————————————————————————————————————————————————————————————— 

To be clear, I want div1, div2, div3 to occupy one third of the remaining width after adding a div of 200 pixels.

What I tried:

1. The presence of div1, div2, div3 in the div container

2. Then with a floating point div4 to the right and a width of 200 pixels.

I tried different things, but to no avail. I would appreciate any help with this.

Answer 1

You will have to bother with the indentation to fix everything else, but below is a working fiddle and code. Sorry for the bad naming conventions, but you can change all this to what you need.

http://jsfiddle.net/8HgHt/

 .third { padding: 0; background-color: gray; height: 100px; float: left; display: table-cell; width: 33%; } .third:hover { background-color: red; } .third_holder { float: left; width: 100%; display: table-cell; } .absolute_div { width: 200px; display: table-cell; background-color: silver; } .whole_container { width: 100%; display: table; } 

 <div class="whole_container"> <div class="third_holder"> <div class="third"> </div> <div class="third"> </div> <div class="third"> </div> </div> <div class="absolute_div"> </div> </div> 

Answer 2

You can use calc

Jsfiddle demo

CSS

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* accounting for borders */ } .wrapper { width:80%; /* or any width */ margin:10px auto; /* for visualisation purposes only */ overflow:hidden; /* float containment */ } .wrapper div { float:left; height:100px; } .fixed { width:200px; background: lightblue; } .percent { width:calc((100% - 200px)/3); /* the magic bit */ background: lightgreen; border:1px solid grey; } 

Support for IE9 and higher - http://caniuse.com/calc

Answer 3

This may help: http://jsfiddle.net/GUcCa/1/

 var fxdWidth = parseInt($('#fixd').css("width").replace("px", '')); var totalWidth = parseInt($('#fixd').parent().css("width").replace("px", '')); $('#floating').css("width", totalWidth - fxdWidth + "px"); 

 .border { border-style: dotted; border-width: 1px; } .border2 { border-style: solid; border-width: 1px; } .block { display: inline-block; width: 33%; } #fixd { width: 200px; float: right; } #floating { width: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="border block" id="fixd"> div4 </div> <div class="border2 block" id="floating"> <div class="border block"> div1 </div> <div class="border block"> div2 </div> <div class="border block"> div3 </div> </div>