0

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:
https://jsfiddle.net/h9h5fhst/

How else could I align two DIVs next to one another without flexbox and float?

3
Contributors
3
Replies
16
Views
1 Year
Discussion Span
Last Post by Aeonix
1

If you use floats on the boxes you take them out of the normal document flow so they won't dictate the height of the parent anymore.
The overflow trick is indeed a method to solve this, but use overflow: hidden instead to clear the floats and to avoid the scrollbar issue your facing. But with this you cant have box-shadows on the parent or the boxes if you want to.

The best way to clear the floats is to use the clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/

I have this box, I need this box to be 230px, and I have second box, that needs to take entire space remaining

Re this, this is ony posiible with flexbox. In your fiddle you just gave the second box also a fixed width to fill the remaining space.

How else could I align two DIVs next to one another without flexbox and float?

There's inline-block, but this has also its own issues

Edited by gentlemedia

0

inline-block and width: calc(100% - 230px)

or,

use floats, and put overflow: hidden on the parent div.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.