How to Position Div Below Another Div

How to place a div below another div?

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/

Placing a div below another div

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.

Positioning a div under another div with absolute position

I believe this does what you're asking for:

<!DOCTYPE html>
<html>

<head>
  <title>Website Design</title>

  <style>
    .div1 {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 25%;
    }
    
    .div2 {
      position: absolute;
      top: 0;
      left: 25%;
      bottom: 0;
      width: 75%;
      background-color: Coral;
    }
    
    .div3 {
      position: absolute;
      top: 100%;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: Aquamarine;
    }
  </style>
</head>

<body>

  <div class="div1"></div>

  <div class="div2"></div>

  <div class="div3"></div>
  
</body>

</html>

How to position div below another div

It looks as though this is actually a problem with the height of the divs.

Since the content is floating, it doesn't affect the height of the div. Thus, the content in the second div (NOT the div itself) wraps around the floated label from the first div.

clear: both is acceptable, but if (for instance), you wanted to use these divs as one column of a two-column layout, it would break the layout.

I would suggest div { overflow: hidden; } instead. This supplies a new box-context for the divs, which disallows overlapping borders, thus making the height of floated contents contribute to the height of the div.

Edit: Fixed fiddle

How to force div to appear below another div

You can try on menu2:

   float: right;
   clear: both;

here is a working fiddle
https://jsfiddle.net/qxLk4afk/2/

How can I position one element below another?

just give position : relative to second div and top:315px or what ever you want

.first{     width:70%;     height:300px;     position:absolute;     border:1px solid red; }.second{    border:2px solid blue;    width:40%;    height:200px; position: relative;    top: 315px;}

<html><head>
</head><body><div class="first"></div><div class="second"></div></body></head>

Place div below another div with property display:grid

Interesting problem, because the number of cards in the "wallet" can be 1, 2 or N and the fact that grid-auto-rows and/or grid-template-rows need to have tracking size explicit specified in the CSS.

Multiple solutions available (conserving the use of grid)

Sample Image

#1 The easy but ugly one

Simply set a margin-top: 200px; to the TEXT div. You apply this only when the cards are stacked.

I'm not a big fan of this solution since is more a "fix" than a proper design.

function expandStackCards() {
  var wrapper = document.getElementById("wrapper");
  if (wrapper.classList.contains("stacked")) {
    wrapper.classList.remove("stacked");
  } else {
    wrapper.classList.add("stacked");
  }
}

button {
  width: 400px;
  margin-bottom: 10px;
}
#wrapper {
  display: grid;
  grid-template-columns: 400px;
  gap: 10px;
}
#wrapper.stacked  {
  grid-auto-rows: 30px;
  gap: 0px;
}
.card {
  width: 100%;
  height: 200px;
  background-color: grey;
  border-radius: 20px;
  padding: 6px 20px;
  box-sizing: border-box;
}
.card span {
  font-family: sans-serif;
  text-transform: uppercase;
  color: white;
}
.card.green {
  background-color: green;
}
.card.blue {
  background-color: blue;
}
.my-text {
  margin: 10px;
}
.stacked .my-text {
  margin-top: 200px;
}

<button onclick="expandStackCards()">Expand / Stack</button>
<div id="wrapper" class="stacked">
  <div class="card green"><span>Card #1</span></div>
  <div class="card blue"><span>Card #2</span></div>
  <div class="my-text">TEXT</div>
</div>