My first problem was.
"I have this box, I need this box to be 230px, and I have second box, that needs to take entire space remaining".
My solution to this was, float
. So I floated both boxes, float: left;
and float: right
. That looked nice, until I noticed that parent box had 0 height, because it was the height of largest item that wasn't float
ed and because there are no objects without float, it defaulted to height: 0
, the only way I've seen box, it's because of padding it had.
So after some Googling, I noticed a solution, overflow: auto
, this forced parent to wrap itself around ALL objects (including float
ed ones) which nicely wrapped. The gave birth to another problem.
In some browsers (ahemFirefoxahem), on some ocassions it produces scroll on the side. Which is what I want to avoid.
While you can't see the last problem in this example, this is something I work with:
https://jsfiddle.net/h9h5fhst/
How else could I align two DIVs next to one another without flexbox
and float
?