DIVs Arrangement - HTML CSS

How can i construct above arrangement without using js ? Thanks in advance ! #div3 { display: inline-block; } #div1 { min-width: 150px; float: left; } #div2 { max

Solution 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..

<div id="Container">
    <div id="Column1">content</div>
    <div id="Column2">content of second div is very  very large</div>
</div>

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;
}

Solution 2:

You could use the holy grail technique: http://alistapart.com/article/holygrail

#div3 {
    display: block;
    background: blue;
    padding-left: 150px;
}

#div1 {
    width: 150px;
    float: left;
    margin-left: -150px;
}

#div2 {
    width: 100%;
    float: left;
}

What this does is create a 150px wide padding on the left of #div3, but it pulls #div1 into it with the negative margin.

This way the "100%" that #div2 uses is actually (100% - 150px) of #div3

Solution 3:

If the width of #div1 is fixed at 150px and #div3 is dynamic, then you can use :

#div2 {
    width : calc(100% - 150px);
}

And if #div1 is also dynamic, then you need to use JS.