Place DIVS inside av DIV under the first DIV

Question

I would like to place to DIVS (grey & red) inside a DIV (black) under the first DIV (black) when you resize the window and the screen is less than 1024 px. Take a look at the example under. You can also see the image attached.

I would really like som advice here, im totally lost here at the moment.

This is how I want it to be on screens more than 1024px:

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

This is how I want it to be on screens less than 1024 px:

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

Do you actually want it to be structured that way, or you do simply want it to appear that way? What sort of content is contained within each block? — Jesse Kernaghan, Jan 19 '16 at 20:51
Is there any content on the black div ? are their heights fixed ? — Gabriele Petrioli, Jan 19 '16 at 21:02
I actually just want them to appear that way. The divs has max-height property and there are no content inside the black box other than the grey and red box. — Bikic, Jan 19 '16 at 21:09
It's not possible the move like that with css, but there are ways to make it to look like that if you're interested. — Stickers, Jan 19 '16 at 21:25
@Bikic just posted an answer with CSS that does not require to use two versions of the html — Gabriele Petrioli, Jan 19 '16 at 21:28
@GabyakaG.Petrioli Nice coding, I was thinking to use `:before` for smaller screen. — Stickers, Jan 19 '16 at 21:32
@Pangloss, cool. That could also allow for some text content (*through the `content` attribute*) if required. — Gabriele Petrioli, Jan 19 '16 at 21:34

score 1 · Answer 1 · answered Jan 19 '16 at 21:26

There is no need to duplicate the content.

#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>

score 0 · Accepted Answer · answered Jan 19 '16 at 20:50

0

Sorry, but that is not possible as written.

You cannot move items outside their containing structures using CSS. You can only reformat them within their present structure.

Optionally, you can duplicate the existing black div and show/hide one or the other based on media queries (screen size).

Or, you can use jQuery/javascript to move the DOM items. But CSS alone cannot do this.

answered Jan 19 '16 at 20:50

cssyphus

37,875
18
96
111

Thanks! If its not possible to move items outside thier containing structure with CSS how can I reformate them within their structure? – Bikic Jan 19 '16 at 20:56

score 0 · Answer 3 · answered Jan 19 '16 at 21:07

Using just CSS (with media queries) and two container <div>s to separate 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>

Above snippet better viewed in full page or this codepen

Place DIVS inside av DIV under the first DIV

3 Answers3