CODEWITHSUNDEEP
htmlcss
rram
rram

Reputation: 2024

How to place a div below another div?

I have a #slider div with an image. After that, I have a #content div which has text. I have tried position:relative so I think it should come after the previous div, I mean #slider but here it is not coming that way.

What is the problem here? How to overcome it?

HTML

<div id="slider">
    <img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
    <div id="text">
        sample text
    </div>
</div>

CSS

#slider {
    position:absolute;
    left:0;
    height:400px;
}
#slider img {
    width:100%;
}

#content {
    position:relative;
}

#content #text {
    position:relative;
    width:950px;
    height:215px;
    color:red;
}

JSFIDDLE

Upvotes: 37

Views: 225239

Answers (2)

Alain1405
Alain1405

Reputation: 2995

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/

Upvotes: 25

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7051

what about changing the position: relative on your #content #text div to position: absolute

#content #text {
   position:absolute;
   width:950px;
   height:215px;
   color:red;
}

http://jsfiddle.net/CaZY7/12/

then you can use the css properties left and top to position within the #content div

Upvotes: 0

Related Questions