Question

I have made a sketch so it is easier for me to explain the problem:

_{(source: mielai.lt)}

So, as you understand three colored rectangles are divs, red rectangle is container, green div has the logo and the other stuff, blue div has thumbnails wrapped in li tags. All divs are on auto width. Thumbnails are floating, so the wider the screen is, the more thumbnails are in a row dynamically, but there is always left space in the right side because it is too narrow for one more thumb to get there.

I would like the blue div to have the width close to where thumbs end, where the blue dotted line is, and it should change dynamically.

Second thing is the green div, ideally i would like it to match the widt of the blue div where it ends as the dotted line, so the stuff in green div won’t step out of the whole look.

Is these possible to make? If yes, please explain how, or give examples.

I have tried various things myself including various examples (Only let certain inner divs control outer div's width) but they don’t work for me.

I would be grateful for any help. Thanks in advance!

Answer 1

As far as I know you have to use JavaScript to do that (or it is at least very easy to do in JavaScript).
Using jQuery for example you can do the following:

$(window).resize(function(){
    var original_blue_width = $("#red").width() - 2*3;
    var blue_width = original_blue_width - (original_blue_width % (10+5));
    $("#blue").width (blue_width);
    $("#green").width (blue_width);
});

where 3 is the padding between the red and the blue boxes, 5 is the padding between the thumbnails and 10 is the width of a thumbnail.
Please ask/comment if something is unclear.