Fill the space div

I would like the element to fill the remaining space of the parent div. I managed to do this, you can see it here "link removed", but the filling of the div (on the right) is under the left div. I want the right div to start where the left div ends.

Hope this makes sense.

<html> <head> <title></title> <style type="text/css"> #left { float:left; width:180px; background-color:#ff0000; height:20px; } #right { width: 100%; background-color:#00FF00; height:30px; } </style> </head> <body> <div> <div id="left">Nav</div> <div id="right">This is the space I need to fill but not go underneath the nav div</div> </div> </body> </html> 
+6
source share
2 answers

In #right just remove width: 100% and add overflow: hidden .

See: http://jsfiddle.net/hJzJf/ - (I assume your height is for testing only)

Why does it work?

See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

+12
source

Set margin-left: 180px; in the element #right. This compensates for its width of the first element.

http://jsfiddle.net/DHSej/

+3
source

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


All Articles