Wrapping a block with other blocks in CSS

Question

css

Good afternoon!

Please help me solve the problem using CSS, maximum compatibility is desirable (including with IE6).



There is a fixed menu block on the left, to the right of it there are block-tables. If you make it simple in two columns - the menu on the left, the tables on the right, when you scroll the page far down, there will be a white bar under the menu. I would like the label blocks to neatly wrap around the menu block, as in the figure above.

Is there an elegant solution to this problem without JS? If definitely not, then with minimal JS ...

Answer 1

The task is not entirely clear. Me - content height? Are the blocks on the right also the height of the content and any number? And it is necessary that the height of the menu is adjusted to the height of the blocks on the right?
And the height of the fit blocks on the right is less than the height of the menu, then it stretches me? So what?

Answer 2

Maybe like this? jsfiddle.net/qQSpJ/9/ I'm not good at layout.

Answer 3

Did I understand correctly? jsfiddle.net/qQSpJ/
The blocks on the right have a common class as required, the class names "block1" and "block2" are just to indicate the color of the blocks, they don't affect the result. The only thing is that the last block will have to be assigned an additional class “last”, otherwise there will be no IE6 support. To opt out of the class "last", you need to do this:
jsfiddle.net/qQSpJ/1/
But then cross-browser compatibility will fall.