How cool would it be if StackOverlow added a little drawing widget so we could make these diagrams with the mouse? Might be more appropriate for design-oriented SE sites... but it would be awesome nevertheless.
– JoeCoolNov 8 '12 at 20:19

The only problem is it forces a fixed minimum width.
– Matt MontagJul 23 '12 at 18:25

6

This isn't a solution, it's just a min-width, when your content gets really small (see question) so below the 100px you have the same issue. Specially with table cells, this stays an issue.
– SanneDec 21 '13 at 18:23

Definitely the best solution I've seen. It works for my use case but I wonder how well it's supported. Fortunately using floats for EVERYTHING is slowly becoming a thing of the past.
– Ryan OreFeb 22 '13 at 17:49

1

Can you explain how this works? or any links atleast?
– Anirudhan JFeb 27 '14 at 12:16

4

@AnirudhanJ It's not too difficult. Inline-block makes the elements flow normally with inline text (but retains some of the padding/margin abilities of the block), and you literally just tell the CSS not to wrap the text with the white-space: nowrap option (applying "normal" again to the child, to avoid it propagating down into everything)
– BrianFeb 28 '14 at 21:02

Are you sure that floated block-level elements are the best solution to this problem?

Often with CSS difficulties in my experience it turns out that the reason I can't see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup ( thinking "how can I make these elements do this?" ) rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that.

well it works for just about everything and the existing layout is based on it, I'm just trying to fix a problem with the layout breaking when you increase the text size too much OR resize the browser window smaller than 700px wide
– JiaaroNov 5 '08 at 18:15

When user reduces window size horizontally and this causes floats to stack vertically, remove the floats and on the second div (that was a float) use margin-top: -123px (your value) and margin-left: 444px (your value) to position the divs as they appeared with floats.
When done this way, when the window narrows, the right-side div stays in place and disappears when page is too narrow to include it. ... which (to me) is better than having the right-side div "jump" down below the left-side div when the browser window is narrowed by the user.

Makes one wonder how this is any worse that using a table.
– tcurdtFeb 11 '14 at 11:27

1

A framework for CSS? I have to -jquery for ALL JavaScript searches and because of a complete and utter disregard for quality we have to start explicitly searching for CSS with -jquery too? Do it right or don't do it at all.
– JohnApr 4 '15 at 20:34