Question

I’m working on site with adaptive layout, this means site adapts to user screen width.
There are three images illustrating my idea, images are showing three steps of brower window resize from wide to narrow.

Wide screen
the purple area sticks to left side of the page and green area fits the rest of the screen.

Medium screen
the green area reached its minimum width

Narrow screen
green area jump under the purple area

I use the following styles

.purple_block {
    float: left;
    width: 751px;
    height: 504px;
    margin: 0 35px 100px 0;
}

.green_block{
    min-width: 400px;
}

But this ‘min-width’ doesn’t work, as the green block width is calculated from the left edge of the purple area till the right edge of the green area.

How to achive the desired behaviour?

UPDATE
the purple block should be fixed always (it is a project gallery actually).
the green block should have margin from purple block and look like a column that fits all the space left (it is a project description: several paragraphs of text + links).
When user narrowing its browser green block get narrower too. When green block reaches its min-width it jumps under the purple block.

Answer 1

Looks like you need screen-size specific CSS. You can define that by using

@media only screen and (max-width: ...px) { ... }

So for every state (your individual images show them) you define the CSS that should change at that browser window width.

E.g.

@media only screen and (max-width: 1000px) {
    .purple_block {
        float: none;
        width: 100%;
        height: 504px;
        margin: 0 35px 100px 0;
    }

    .green_block{
        width: 100%;
        height: 300px;
    }
}

And so on.