Nest DIVs within a DIV located beneath the initial DIV

Question

Nest DIVs within a DIV located beneath the initial DIV

My goal is to have two DIVS (one grey and one red) placed inside a black DIV underneath another black DIV when the window is resized to less than 1024px. Refer to the example provided below or view the attached image.

I could really use some guidance on this, as I am currently feeling quite lost.

This is how I envision it for screens wider than 1024px:

<div id="black">
    <div id="grey"></div>
    <div id="red"></div>
</div>

This is how I want it to appear on screens narrower than 1024px:

<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>

https://i.sstatic.net/BkoGk.png

css stylesheet

Answer 1

Answer №1

Avoid replicating the information.

#black{background:black;overflow:hidden;}

#grey, #red{
  min-height:100px;
  margin:2%;
  float:left;
  width:47%;
}

#grey{background:gray;margin-right:1%}
#red{background:red;margin-left:1%}

@media (min-width:1024px){
  #black{padding-top:100px;}
  #grey, #red{
    float:none;
    width:auto;
    margin:0;
  }
}

<div id="black">
  <div id="grey"></div>
  <div id="red"></div>
</div>

Answer 2

Avoid replicating the information.

#black{background:black;overflow:hidden;}

#grey, #red{
  min-height:100px;
  margin:2%;
  float:left;
  width:47%;
}

#grey{background:gray;margin-right:1%}
#red{background:red;margin-left:1%}

@media (min-width:1024px){
  #black{padding-top:100px;}
  #grey, #red{
    float:none;
    width:auto;
    margin:0;
  }
}

<div id="black">
  <div id="grey"></div>
  <div id="red"></div>
</div>

Answer 3

Answer №2

I'm sorry, the request as written is not feasible.

CSS does not allow for moving items outside of their designated containers; it only permits reformatting within the existing structure.

As an alternative, you could duplicate the black div and toggle between them using media queries to adjust based on screen size.

Another option is utilizing jQuery or JavaScript to relocate DOM elements, as CSS alone cannot accomplish this task.

Answer 4

I'm sorry, the request as written is not feasible.

CSS does not allow for moving items outside of their designated containers; it only permits reformatting within the existing structure.

As an alternative, you could duplicate the black div and toggle between them using media queries to adjust based on screen size.

Another option is utilizing jQuery or JavaScript to relocate DOM elements, as CSS alone cannot accomplish this task.

Answer 5

Answer №3

To create a responsive layout using only CSS and media queries, you can utilize two container <div> elements to manage the logic:

@media (max-width: 1024px) {
  .large { display: none; }
  .small { display: block; }
  .black { height: 100px; }
}

@media (min-width: 1025px) {
  .large { display: block; }
  .small { display: none; }
  .red, .grey { float: left; }
  .black:after { content: ""; display: table; clear: both; }
  .red { width: calc(50% - 5px); margin-left: 10px; }
  .grey { width: calc(50% - 5px); }
}

.large {
  height: 200px;
}

.small {
  height: 200px;
}

.black {
  background-color: black;=
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

.red {
  background-color: red;
  height: 100px;
}

.grey {
  background-color: grey;
  height: 100px;
}

<div class="large">
  <div class="black">
    <div class="grey"></div>
    <div class="red"></div>
  </div>
</div>

<div class="small">
  <div class="black"></div>
  <div class="grey"></div>
  <div class="red"></div>
</div>

For optimal viewing of the above snippet, consider opening it in full page mode or visit this codepen link

Answer 6

To create a responsive layout using only CSS and media queries, you can utilize two container <div> elements to manage the logic:

@media (max-width: 1024px) {
  .large { display: none; }
  .small { display: block; }
  .black { height: 100px; }
}

@media (min-width: 1025px) {
  .large { display: block; }
  .small { display: none; }
  .red, .grey { float: left; }
  .black:after { content: ""; display: table; clear: both; }
  .red { width: calc(50% - 5px); margin-left: 10px; }
  .grey { width: calc(50% - 5px); }
}

.large {
  height: 200px;
}

.small {
  height: 200px;
}

.black {
  background-color: black;=
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

.red {
  background-color: red;
  height: 100px;
}

.grey {
  background-color: grey;
  height: 100px;
}

<div class="large">
  <div class="black">
    <div class="grey"></div>
    <div class="red"></div>
  </div>
</div>

<div class="small">
  <div class="black"></div>
  <div class="grey"></div>
  <div class="red"></div>
</div>

For optimal viewing of the above snippet, consider opening it in full page mode or visit this codepen link

Nest DIVs within a DIV located beneath the initial DIV

Answer №1

Answer №2

Answer №3

Similar questions

Focusing on the Div element to set the background color

What is the best way to ensure that only one accordion tab remains open at a time, preventing it from closing unless a different tab

Using Jquery to determine if a div is empty, excluding any content before or after it

Alert popup onclick feature is malfunctioning

The alignment and sizing issues with stacking icons using fontawesome are still unresolved

Escaping from its container, text breaks free with the power of CSS

How to continuously animate images in HTML using Bootstrap

Tips for arranging divs in the exact way you want

The dropdown menu disappears when I hover over the tab, making it impossible for me to navigate it in the react app

Struggling to position elements next to a floated div?

Is there a way to disable the backspace keycode in an input field?

Creating a text-filled alphabet design using HTML, CSS, and JavaScript: A step-by-step guide

choose a selection hopscotch

Detect if the user is using Internet Explorer and redirect them to a different

Issue with Firefox causing Bootstrap form to appear incorrectly

Pictures failing to appear in css/jquery slider

When the "disabled" property is enabled, the <Select> element prevents the scrollbar from appearing

The horizontal alignment of a jQuery div is off-center

What is the best way to display content next to an image, as well as below the image once it finishes?

Discovering the initial word of a string using jQuery