Question

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 absolute positioning)

Answer 1

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/