Keeping floats from wrapping inside undefined width div

[jocke76]

Ah!
Found the solution myself! =)

Adding: white-space: nowrap; to the list-div (class=”list”) solved it!

[Paulie_D]

Wait..this is a list?

Frankly this sounds like a really strange design…I really can’t see what the point would be.

Is it supposed to scroll horizontally or something?

Are the ‘boxes’ supposed to hold some content?

Perhaps some mock-ups of what you are trying to achieve would help us help you.

[Paulie_D]

Because you SEEM to want the ‘boxes’ to go off the screen at lower viewport sizes.

[jocke76]

Yes, it’s actually a list.
I just thought it would be cleaner in the initial example to use divs instead of ul’s and li’s.
IMHO it wouldn’t matter.

No, it’s not a menu.
It’s basically a table but somewhere sometime (around 5-6 years ago) I decided to use divs and uls instead of tables. If I remember correct it was because I couldn’t trust tables cells to display in a certain width, therefor I couldn’t have a scrollable table with the table headers in another table above. (since the widths could be different).

Anyhow..
I’ve expanded the example to include some of the surrounding design in this example:
http://codepen.io/anon/pen/Hgshc

This example and the application works exactly as I want it to do in Chrome, but not in FF (16.0.2).

[Paulie_D]

If it’s tabular data…use a table…but without seeing a mock-up of a finished page, I really have to throw my hands up and surrender.

I guess I need context to figure out what the hell is going on.

At the moment, frankly, I have no idea of what this is supposed to do or how it is supposed function….but good luck with it.

[jocke76]

I understand you Paulie!
You’ve really helped me in the right directions, and for that I’m truly grateful.

I’m posting a screen shoot if you don’t want to give up =)
http://postimage.org/image/6v33u03el/full/
The image shows the correct layout .. If I resize the windows the layout inside the box totally crumbles. (http://postimage.org/image/71w8lbycp/)

Otherwise..
I’ll just have to either change the design to use tables instead of ul/li or change the overflow of the closest div to auto/scroll and fixed width. That way it won’t interfere with the rest of the design.

[jocke76]

Bah,
Found the solution (again).

In the example I changed the follow in css for “ul.horz > li”

display: block; to display: inline-block;
float: left; (removed)
Now it works in FF too.

[Paulie_D]

Totally a table…

[jocke76]

=)
10 years ago I had tables for it ..
Back then css wasn’t invented, atleast afaik =) (Atleast it was a pain)

Then

wasn’t always 100px ,, it could be 120px aswell.
Or maybe it was just my incompetens.. =)

[jimmy]

Always use tables for tabular data storage, it’s not outdated and it will probably never be.

Make everything on purpose, as specific as it should be.

[Responsive tables](https://css-tricks.com/examples/ResponsiveTables/responsive.php “Responsive tables”)

Good example from Chris here, what you can achieve with tables. You do not need to style them in HTML, what is more – you SHOULD not. Using CSS, everything will line up perfectly, don’t ever be afraid of tables – as long as you use it for data, not layout, of course.

Good luck!

[Author]

Posts