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

Attempting to create a JavaScript calculator from scratch

What is the best way to trigger a modal on Bootstrap using a JavaScript/jQuery function?

Using JavaScript and jQuery to create a delay when handling input events

Is it considered acceptable to include a stylesheet inside the <body> element?

Setting the minimum and maximum width of a div using Bootstrap, not based on the number of columns

Do not proceed if the process has encountered a failure

The CSS within the WebComponent nesting is not valid

A Step-by-Step Guide on Importing Components in Vue.js

Circular css3 animation originating from the center

Focusing on a specific image using Jquery

Selecting the perfect default font using font-display: fallback

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

What is the process for registering a click using a class in jQuery and retrieving the ID of the clicked element?

How to implement CSS styling for a disabled component

What is causing the z-index to not function properly on my elements?

Ways to create a sequential appearance of elements through CSS animations

Ways to align grid components at the center in MUI frameworks?

Using Twitter Bootstrap to set a minimum number of lines for thumbnail captions

HTML5 pattern grouping feature is not functioning as expected

Transferring information between pop-up and webpage