Aligning a 100% width div to a fixed width div

Consieder the following please:

.d1 {
width: 100px;
float: left;
}

.d2 {
width: auto;
float: left;
}

<div class="d1">Content fixed</div>
<div class="d2">This content should take the rest of the page (on vertical side)</div>
开发者_StackOverflow

This does not work. How can I let a fixed width div stay on the left of a variable (window adaptive) width div?

Thank you.

Removing the float from .d2 and giving it a left padding equivalent to .d1's width will do the trick:

.d1 {
    float: left;
    width: 100px;
}

.d2 {
    padding-left: 100px;
}

You can see it in action here.

One way is to give the .d2 a position:absolute, then a left:100px and a right:0;

Example: http://jsfiddle.net/La6QP/

Instead of width:auto try width: 100% (or 90% / 99% etc) for the larger div.

Just remove your current styling from d2 and give it some margin.