ansaurus

Question

Answer 1

+1 A:

To keep everything together, add this:

div.foo
{
  white-space:nowrap;
}

Derek Illchuk 2009-12-15 20:44:06

Perhaps (based on Paul's note that things seem to break out of their content):`white-space:nowrap;overflow:scroll` ? Though I haven't tested that.

Tchalvak 2009-12-15 21:38:35

Answer 2

+1 A:

So you have a bunch of divs, each containing some content, and you want them displayed next to each other, in a row?

.foo { float: left; }

will make them float to the left and they will all appear next to each other; each box shrink-wrapped to the minimum width needed.

Mr. Shiny and New 2009-12-15 20:44:55

You'd need to make sure that the content has overflow: auto; set so that the foo's will still be inside of it.

Chris 2009-12-15 21:50:22

@Chris: you're right that there is probably more required than the float: left. However without more requirements it's hard to say just what else is needed.

Mr. Shiny and New 2009-12-16 14:28:57

Answer 3

+3 A:

The white-space:nowrap style does prevent the "foo" divs from breaking, but I also found it caused them to blow out of the width defined in the "content" div.

I found the following worked in IE, Firefox, and Chrome (pc only, don't have access to a Mac just now)

div.foo
{
    display:inline-block;
}

Paul 2009-12-15 21:06:49

Answer 4

+1 A:

This is an example where tables are 'allowed' to be used. Because this is tabular data. Somewhat.

Doing everything in div is fine for layouts, but you're actually listing things with rows and columns. That's a table in my book.

Tor Valamo 2009-12-15 21:40:35

+1. It certainly is.

BalusC 2009-12-15 21:44:29

I'd disagree that just because something has rows and columns it is a table. Also if your "cells" are fixed size it is fairly easy to simulate a grid layout without tables. Finally, the CSS `display: table, table-cell, table-row, etc` can be used to get the browser's table-layout properties without a semantic table (sadly, no IE 6 or 7 support for those.)

Mr. Shiny and New 2009-12-16 14:27:48

@Shiny: I didn't say 'just because it has rows and columns'. I said 'LISTING THINGS with rows and columns'.

Tor Valamo 2009-12-16 18:27:29

@Tor: Perhaps I misunderstood the original question. If Each 'foo' is meant to be on a single line and the data inside the 'foo' blocks is meant to be evenly spaced, then yeah, it is a table. My original impression was that each foo block was an individual block mean to be spaced in a grid.

Mr. Shiny and New 2009-12-17 14:14:00

ansaurus

tags:

views:

answers:

CSS Formatting to Keep Together

related questions