CODEWITHSUNDEEP
htmlcss
Jinzu
Jinzu

Reputation: 1335

Placing a div below another div

How do I place a div below another one I have? The div to which I am referring is referenced by id textual and I want it to be below picture. Here is HTML and CSS: 

#picture {
  position: absolute;
  top: 50%;
  left: 30%;
}

html {
  background-color: teal;
}

#textual {
  margin-top: 50px;
}

p {
  font-size: 30px;
}
<h1 class="text-center">Sir Isaac Newton</h1>
<div class="container-fluid" id="main">
  <div id="picture">
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
  </div>
  <div id="textual" style="text-align: center">
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist.
  </div>
</div>

Upvotes: 1

Views: 4834

Answers (5)

b2ok
b2ok

Reputation: 546

Use relative position for textual div and remove it in picture div, like this:

<style>
#picture {
  position: absolute;
  top: 50%;
  left: 30%;
}

html {
  background-color: teal;
}

#textual {
    position: relative;
    top: 50px;
    left: 0;
}

p {
  font-size: 30px;
}

</style>


<h1 class="text-center">Sir Isaac Newton</h1>
<div class="container-fluid" id="main">
  <div id="picture">
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
    <div id="textual" style="text-align: center">
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist.
  </div>
  </div>

</div>

Upvotes: 0

komal
komal

Reputation: 135

You just need to add position: relative and it should work fine. http://jsfiddle.net/XELRX/136/

#picture {
  position: absolute;
  top: 50%;
  left: 30%;
}

html {
  background-color: teal;
}

#textual {
  margin-top: 50px;
}

p {
  font-size: 30px;
}
<h1 class="text-center">Sir Isaac Newton</h1>
<div class="container-fluid" id="main">
  <div id="picture">
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
  </div>
  <br>
  <div id="textual" style="text-align: center">
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist.
  </div>
</div>

Upvotes: 0

Sidra M.
Sidra M.

Reputation: 66

You're using absolute positioning with your #picture div, which means that it ignores the 'natural' order of positioning on the page. In order for your image to appear where you want it, adjust your CSS so that you aren't using absolute positioning. For example, you could put both image and #textual div within another div that you use for positioning the content inside.

Be sure to research the CSS Box Model to get a better understanding of how to optimally position elements with HTML and CSS.

Upvotes: 0

JJJ
JJJ

Reputation: 3332

div elements are block elements and block elements are designed to stack on top of one another. If you want them to stack, remove position:absolute from #picture in your CSS.

https://jsfiddle.net/9fwcgnv3/

Upvotes: 1

tech2017
tech2017

Reputation: 1806

in your css: 

#picture {
 text-align:center;
}

position:absolute; top:50%; is moving the picture down.

Upvotes: 0

Related Questions