I have two blocks, which should normally be side-by-side. I want the first one to have a max-width of 500px, and a min-width of 300px, and I need that block scale with screen resizes. I then want another block sitting next to it that would either move off screen or fall under the first block ideally when screen space is lost. I have been playing with additional containers and various width settings, but I haven't been able to find anything that works.

2 answers

1
point

For columns that need be forced below other columns based on screen width, display: inline-block; is very useful. You can see an example here: link text (adjust your browser width to see it)

Using min-width and max-width on those blocks should work, though I've never tried it.

Answered about 9 years ago by Joshua Clanton
  • I was playing around with display: inline-block, but the first block always uses the min-width on my page. On your example, I see the behavior I am after. I can't really see any differences in implementation, so I really am not sure what is going on. Karl Norby about 9 years ago
1
point

This might have some inspiration:

http://www.themaninblue.com/experiment/ResolutionLayout/

Answered about 9 years ago by Tony Crockford