4

I need CSS rules which can dynamically adapt/re-format a content of a div to any changes of the size (even if the JavaScript is disabled). Is it possible?

Like:

@media (min-width:600px ) { div .content { column-count: 2; }}
@media (min-width:900px ) { div .content { column-count: 3; }}
...

or something, but for DIV and without JS.

I needed the CSS rules, which depends of the size of DIV instead of the size of viewport/screen... Maybe not like the @media rules, but something to change the div content formatting.

hupapayo
  • 41
  • 1

1 Answers1

1

Not sure if this is what you are looking for but float some divs and create a media query to make their parent container smaller at the specific size

HTML:

<div class="container">
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
</div>

CSS:

.container {
  width: 100%;
}

.box {
  height: 100px;
  width: 100px;
  float: left;
  margin: 2px;
}

#box1 {
  background-color: red;
}

#box2 {
  background-color: blue;
}

#box3 {
  background-color: green;
}

#box4 {
  background-color: purple;
}

@media (max-width: 960px) {
  .container {
    width: 50%;
  }
}

See (resize the window): https://codepen.io/anon/pen/qrZRpZ

ByteSettlement
  • 208
  • 1
  • 3
  • 14
  • this is a good answer. if you look at masonry type layouts, this is roughly the appraoch. 'number of columns' isn't meaningful in css. – bamabacho Mar 02 '17 at 21:31
  • But if I don't know the size of the container (even in percents of screen)? p.s. JSFiddle is much better, because Codepen is much less crossbrowser compatible and have a google capcha protection to even view access... – hupapayo Mar 02 '17 at 21:47
  • @hupapayo you can just click the space outside of the popup to close it, here it is in on jsfiddle though https://jsfiddle.net/90jzytxv/ – ByteSettlement Mar 02 '17 at 22:07