BrunoLM BrunoLM - 1 year ago 62
CSS Question

How to position two divs side by side where the second width is 100%?

I want to achieve this:

width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |

Sample html on jsFiddle.

Is it possible to place two divs side-by-side leaving the second div with all remaining space?

Answer Source

Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this: {
  width: 60px;
  float: left;

div.two {
  margin-left: 60px;

Keep in mind that the width CSS property on the div only applies to the content, so you need to set the margin-left to be the sum of the width, border, margin, and padding properties of the first div.

Here is the updated version of your jsfiddle. Let me know if you have any questions about it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download