Unable to place a div below another div

Question

Unable to place a div below another div

I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome.

Currently, the website looks like this:

https://i.stack.imgur.com/ItOcp.jpg

However, I envision it looking like this:

https://i.stack.imgur.com/fWyjo.jpg

Unfortunately, I am facing difficulties in getting it to work as intended. The positioning of the div element is not behaving how I would like it to.

This is the source code I am working with: JsFiddle

The issue seems to be related to this particular section of the code:

 <div class="wrapper_3">
    <div class="main_3">
        3
    </div>
 </div>

I appreciate any assistance you can provide. I am truly struggling to make it work correctly.

html css

Answer 1

Answer №1

To style wrapper_1 and wrapper_2, add float:left; to both elements.

Next, use position:relative; to position wrapper_2 accordingly.

If you need further assistance with CSS syntax, check out the following link: CSS Position Property Here is your updated CSS:

.wrapper_1 {    
  width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  clear: both;
  float: left;
}

.wrapper_2 {
  width: 25%;
  display: inline-block;
  position: absolute;
  margin-left: 16px;
  top: 50%;
  float: left;
}

Answer 2

To style wrapper_1 and wrapper_2, add float:left; to both elements.

Next, use position:relative; to position wrapper_2 accordingly.

If you need further assistance with CSS syntax, check out the following link: CSS Position Property Here is your updated CSS:

.wrapper_1 {    
  width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  clear: both;
  float: left;
}

.wrapper_2 {
  width: 25%;
  display: inline-block;
  position: absolute;
  margin-left: 16px;
  top: 50%;
  float: left;
}

Answer 3

Answer №2

If you want to simplify the process, consider utilizing bootstrap for your website development.

Here is an example of HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <div class="logo text-center">logo</div>
        </div>
        <div class="col-xs-offset-4 col-xs-3 box">2</div>
            <div class="col-xs-offset-4 col-xs-3 box">1</div>
    </div>

</div>

CSS styling:

.logo {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 15px;
}
.box {
    padding: 60px;
    background-color: red;
    margin-top: 30px;
}

For a live demo of this code, visit here.

To properly implement Bootstrap, make sure to link the bootstrap.css file in your code. You can learn more about linking bootstrap.css by visiting this link and adding the required code to the head section of your file.

Answer 4

If you want to simplify the process, consider utilizing bootstrap for your website development.

Here is an example of HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <div class="logo text-center">logo</div>
        </div>
        <div class="col-xs-offset-4 col-xs-3 box">2</div>
            <div class="col-xs-offset-4 col-xs-3 box">1</div>
    </div>

</div>

CSS styling:

.logo {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 15px;
}
.box {
    padding: 60px;
    background-color: red;
    margin-top: 30px;
}

For a live demo of this code, visit here.

To properly implement Bootstrap, make sure to link the bootstrap.css file in your code. You can learn more about linking bootstrap.css by visiting this link and adding the required code to the head section of your file.

Answer 5

Answer №3

Here is the updated version :) I made some changes to your code snippet. Have you considered using relative positioning instead of absolute positioning for a cleaner design?

* { 
  padding: 0; 
  margin: 0; 
}

html, body {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper_logo {
  margin-top: 10px;
  margin-left: 10px;
  width:20%;
  display: inline-block;
  position: relative; /* Changed from absolute */
}

.wrapper_logo:after {
  padding-top: 45%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_logo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px;
    padding-left: 20px;
    font-size: 30px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: black;
    vertical-align: middle;
}

.wrapper_1 {
  width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
}

.wrapper_1:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
  clear: both;
}

.main_1 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_2 {
  width: 25%;
  margin-left:200px;
}

.wrapper_2:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_2 {

  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_3 {
  width: 15%;
  float: left;
  display: inline-block;
  position: relative; /* Changed from absolute */
}

.wrapper_3:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.three {
  position: absolute; 
  background: green; 
  width: 400px; 
  top: 10px; 
  left: 50px;
}

<!DOCTYPE html>
<div class="main">
    
    <div class="wrapper_logo">
<div class="main_logo">
LOGO
</div>
</div>

        <div class="wrapper_1">
<div class="main_1">
1
    </div>
</div>

<div class="wrapper_2">
<div class="main_2">
2
    </div>
</div>

<!-- <div class="wrapper_3">
<div class="main_3">
3
    </div>
</div> -->
</div>

Answer 6

Here is the updated version :) I made some changes to your code snippet. Have you considered using relative positioning instead of absolute positioning for a cleaner design?

* { 
  padding: 0; 
  margin: 0; 
}

html, body {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper_logo {
  margin-top: 10px;
  margin-left: 10px;
  width:20%;
  display: inline-block;
  position: relative; /* Changed from absolute */
}

.wrapper_logo:after {
  padding-top: 45%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_logo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px;
    padding-left: 20px;
    font-size: 30px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: black;
    vertical-align: middle;
}

.wrapper_1 {
  width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
}

.wrapper_1:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
  clear: both;
}

.main_1 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_2 {
  width: 25%;
  margin-left:200px;
}

.wrapper_2:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_2 {

  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_3 {
  width: 15%;
  float: left;
  display: inline-block;
  position: relative; /* Changed from absolute */
}

.wrapper_3:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.three {
  position: absolute; 
  background: green; 
  width: 400px; 
  top: 10px; 
  left: 50px;
}

<!DOCTYPE html>
<div class="main">
    
    <div class="wrapper_logo">
<div class="main_logo">
LOGO
</div>
</div>

        <div class="wrapper_1">
<div class="main_1">
1
    </div>
</div>

<div class="wrapper_2">
<div class="main_2">
2
    </div>
</div>

<!-- <div class="wrapper_3">
<div class="main_3">
3
    </div>
</div> -->
</div>

Unable to place a div below another div

Answer №1

Answer №2

Answer №3

Similar questions

Navigating within fixed-positioned divs

Tips for setting up Greasemonkey to automatically click on an unusual link on a particular website

Node-modules CSS

Limit the character input in AngularJS/Ionic to a specific number

Tips for disabling viewport resizer while accessing the Console panel in Chrome using Control+Shift+J

"Upon choosing a file using the HTML input file multiple element, a triggered event

Creating an insert query in Node.js with frontend HTML and connecting it to a PostgreSQL database is a crucial task in web

Learn how to dynamically insert data retrieved from a database into a PHP database table

What is the best way to customize the style of a react.js component upon its creation?

"Use AJAX to dynamically update a div element when a button is clicked with a specific value

Displaying images in Dash Python by utilizing external Javascript

Troubleshooting problem with navigation tabs in Bootstrap version 3.x

Preventing HTML entities from expanding in the HTML::TreeBuilder Perl module

information not visible on the webpage

Is there a way to utilize a Javascript function to incorporate commas into a div tag?

Prevent jquery-ui datepicker from opening when the confirmation box is cancelled

Choosing particular contenteditable divisions using jQuery

Is it possible to replace text on click using CSS instead of jQuery?

Concealing divisions on a website with CSS styling

Displaying the information from a nested array of objects in an HTML table through iteration