DIVs Arrangement - HTML CSS

Question

How can i construct above arrangement without using js ?

Thanks in advance !

Answer 1

all of those techniques in the other answers have a common problem. they are assuming that the width of the first column is 150px, but actually you need min-width to be 150px. so what happens when the first column need to grow?

take a look at my solution. pure CSS, without using calc (so its also supported in older browsers like IE8)

Working Fiddle

HTML: nothing new here..

    
content
    
content of second div is very  very large

CSS:

#Container
{
    width: 80%; /*Change to WTE you want*/
    display: table;
    border: 1px solid black;
    margin: 0 auto;
}
#Container > div
{
    display: table-cell;
}
#Column1
{
    background-color: red;
    min-width: 150px; /*From your CSS*/
}

#Column2
{
    background-color: green;
}