Make div width 100% when the div next to it is pushed down the page

Question

CSS gurus, I'm back with another probably lame question. I have two divs next to eachother. I want to meet the following two conditions:

When there is enough space for both on the page, they should have 50% width and be on the same row.
When there isnt enough space - they should be 100% width and on top of eachother.

Here is a JSFiddle: https://jsfiddle.net/kwg1upu0/5/

HTML:

<div class="container">
 <div class="divOne"></div>
 <div class="divTwo"></div>
</div>

CSS:

.container {
  width: 100%;
}

.divOne { 
  width: 50%;
  min-width: 300px;
  height: 100px;
  background-color: yellow;
  float: left;
}

.divTwo {
  width: 50%;
  min-width: 300px;
  height: 100px;
  background-color: blue;
  float: left;
}

EDIT: Indeed Media Queries are the correct answer which I marked. Keep in mind that media queries will only apply on page load, so the change won't happen dynamically as you resize the window. In my case I need that, so I will have to do it programatically with Angular and $window.innerWidth.

Thanks mate, this is exactly what I was looking for. You can post it as an answer so I can upvote it too. Thanks :) — Neekoy, Feb 09 '17 at 14:21
I asked myself a similar question : http://stackoverflow.com/questions/38846700/how-to-force-a-block-container-to-take-always-all-the-available-width. I haven't found a solution yet. — Eria, Feb 09 '17 at 14:21
@Eria what you asked is a combination of my question here, and a question I asked yesterday - http://stackoverflow.com/questions/42126074/css-center-div-child-of-two-pairs-of-divs/ - Basically you need to do both of them. I'll give it a try once I get this done :) — Neekoy, Feb 09 '17 at 14:25
If you use @media screen and (max-width:600px), then the change will happen as you resize the window. — tigerdi, Feb 09 '17 at 15:54
Welcome @Neekboy :) Np, Your problem is solved, that is more important than upvote :) — Nikhil Chavan, Feb 10 '17 at 06:18

DomeTune · Accepted Answer · 2017-02-09T16:14:26.033

1

You can use a media query.

.container {
  width: 100%;
}

.divOne {
  width: 50%;
  height: 100px;
  background-color: yellow;
  float: left;
}

.divTwo {
  width: 50%;
  height: 100px;
  background-color: blue;
  float: left;
}

@media (max-width: 600px) {
  .divOne, .divTwo {
    width: 100% !important;
  }
}

<div class="container">
 <div class="divOne"></div>
 <div class="divTwo"></div>
</div>

edited Feb 09 '17 at 16:14

answered Feb 09 '17 at 14:17

DomeTune

1,401
10
21

Brilliant! Funny thing that just yesterday I read about media queries, should have though of them. Thanks for your time, cheers :) – Neekoy Feb 09 '17 at 14:19
You can mark it as the answer, so everybody will directly see it :-) – DomeTune Feb 09 '17 at 14:20
It doesn't allow me for 4 more minutes, will mark as the correct answer as soon as the cooldown is off :) – Neekoy Feb 09 '17 at 14:22
This gives the divs a fixed width of 300px, when the screen width is above 600px. You wanted the divs to fill the page 50% each. See my answer below. – tigerdi Feb 09 '17 at 14:23
@tigerdi thats right, i updated the answer. He only needed to update the fixed width to a percantage width. The OPs question got answered with the `media query`:-) – DomeTune Feb 09 '17 at 16:15

score 1 · Answer 2 · answered Feb 09 '17 at 14:20

I think the only way to do this properly is with media queries. See fiddle: https://jsfiddle.net/kwg1upu0/6/

@media screen and (max-width:600px) {
  .divOne, .divTwo {
    width:100%;
  }
}

Once the width of the page is 600px or less, then change it to 100% width.

Make div width 100% when the div next to it is pushed down the page

2 Answers2