All geek questions in one place

(CSS), how could I make a div so that all the free space is width without a specific value, but there is another div in the same place with a specific

I have this problem, I can not find a solution for it:

I have 3 div s, two of them are located inside the third.

div that contains others has a percentage width.

The second, which is inside the first, does not have a certain width and floats to the left.

The third, which is also inside the first, has a certain width and floats to the right.

The question is how to make the second div as wide as possible?

Because it matches the default content.

 <div id="a"> <div id="b"> </div> <div id="c"> </div> </div> <style> #a{ width: 80%; } #b{ width: ??; float:left; } #c{ width: 50px; float:right; } </style>
+4
source share
5 answers

arrange your divs as follows

 <div id="a"> <div id="c">456</div> <div id="b">123</div> </div>

and remove the float with #b

 #b{ background-color:#06F; }

check jsFiddle file

+7
source

JsFiddle working demo

enter image description here

You should put your fixed element in front of another:

 <div id="a"> <div id="c"> FIXED ELEMENT </div> <div id="b"> FLEXIBLE ELEMENT </div> </div>

And in CSS:

 #a { width: 80%; background: green; overflow: hidden; } #c { width: 50px; float: right; background: yellow; } #b { margin-right: 50px; background: pink; }
+2
source

Floats are not a great choice for layout purposes, as this is not exactly what it is intended for. If all you need is to have 2 elements side by side and not other aspects of the float, I recommend displaying the properties of the table * instead:

http://cssdeck.com/labs/tbarj05i

 #a{ width: 80%; display: table; } #b{ display: table-cell; } #c{ width: 50px; display: table-cell; }
+1
source

I would suggest giving #C a percentage instead of pixels, or finding out the overall width and setting it to minus 50 pixels.

Also have you tried width:100% ?

0
source

width: 100% for B is its container width, hope this illustrates:

 <html> <head> <style> div{ border: solid 1px #ccc;} #a{ width: 80%; } #b{ width: 100%; float:left; } #c{ width: 50px; float:right; } </style></head><body> <div id="a"> <div id="b">DIV B </div> <div id="c">DIV C </div> </div> </body> </html>
-1
source

Source: https://habr.com/ru/post/1485798/

More articles:


All Articles