You have set #slider
as absolute
, which means that it “is positioned relative to the nearest positioned ancestor” (confusing, right?). Meanwhile, #content
div is placed relative, which means “relative to its normal position”. So the position of the 2 divs is not related.
You can read about CSS positioning here
If you set both to relative
, the divs will be one after the other, as shown here:
#slider {
position:relative;
left:0;
height:400px;
border-style:solid;
border-width:5px;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#content #text {
position:relative;
width:950px;
height:215px;
color:red;
}
http://jsfiddle.net/uorgj4e1/