CODEWITHSUNDEEP
csshtml
Andry
Andry

Reputation: 16865

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>

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.

Upvotes: 0

Views: 367

Answers (4)

Rob
Rob

Reputation: 15158

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

Upvotes: 0

Pat
Pat

Reputation: 25675

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.

Upvotes: 1

Bart
Bart

Reputation: 6814

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

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

Upvotes: 1

Michelle
Michelle

Reputation: 1844

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

Upvotes: 0

Related Questions