css variable width 2 boxes

I am new to css.

I have made 2 div's. Both contain some text.

The first div is a box that will vary in width. I want the second box to always be 50px to the right of the first box, no matter what the width of the first box is.

How can I do this with css?

(I currently have the left box set as abso开发者_开发问答lute positioning)

HTML:

<div id="box1">
    <div id="box2"></div>
</div>

CSS:

#box1 {
    position:absolute;
    left:0; top:0;
    width:200px; height:200px;
    background:red; 
}

#box2 { 
    position:absolute; 
    right:-150px; top:0;
    width:100px; height:100px;
    background:blue;
}

This solution only works if the width of the right DIV is fixed. In that case, set the right property to - ( width + 50 ) px. In my example, it's -150px.

Live demo: http://jsfiddle.net/simevidas/U47Ch/

Like this,

* {padding: 0; margin: 0;}

div {float: left; height: 100px;}
#left {padding: 0 50px 0 0; width: 100%;}
#right {position: absolute; right: 0; top: 0; width: 50px;}

<div id="left">
<div id="right">
</div>
</div>

This will do the trick.

I think this works with any length text in either column, in any size container:

<style type="text/css">
    #left {padding-right:100px; float:left; display:inline; position:relative;}
    #right {position: absolute; right: 0px; top: 0px; width: 50px; overflow:hidden;}
</style>

<div id="left">
    <div id="right">
        Lorem ipsum dolor sit amet, consectetur 
    </div>
    Aliquam congue odio sed dolor rhoncus malesuada.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum elementum pellentesque.
</div>

Tested in FireFox only. The right padding of #left must always be width of #right plus 50.

<style type="text/css">
    #divBox2 { margin-left: 50px; }
</style>

Margin simply adds 50px to the left of box2, meaning there will always be 50px of space left of box2, thus between box 1 and 2, also remove absolute positioning of box 1.

<div id="divBox1">
</div>
<div id="divBox2">
</div>