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
floated 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
floated 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:
How else could I align two DIVs next to one another without