Make square divs to occupy whole screen

Question

I'd like to make these occupy whole screen horizontally as squares and fit into it. At the moment they fit, because they are inline-blocks, but on certain screen sizes(or if you zoom out a bit) they will leave a <250px space to the right.

I could give them, for instance, width:25%;, but how can I make them be squares? How to set the height to be equal to the dynamic width?

.note {
  display: inline-block;
  /*
#F3F389-galben
#96C0FF albastru
#94F1B6 verde
rosu#f40042
     */
  background-color: #f40042;
  width: 250px;
  height: 250px;
  margin-left: 25px;
  margin-top: 25px;
  padding: 0;
}
textarea {
  width: 80%;
  height: 60%;
  display: block;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  resize: none;
  background: rgba(0, 0, 0, 0.13);
  border: none;
  padding: 5px;
  font-family: 'Rancho', Helvetica, sans-serif;
  font-size: 15px;
}

<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>
<div class="note">
  <textarea placeholder="Your note's text here"></textarea>
</div>

Found my answer here http://stackoverflow.com/questions/17188455/how-to-center-multiple-divs-inside-a-container-in-css — George Irimiciuc, Oct 21 '14 at 18:54

score 1 · Accepted Answer · answered Oct 21 '14 at 18:41

1

I dont know of any possible way using HTML, CSS to do this. You need to use script to set the height of a div/element to be the same as dynamic width

var w = $('.note').width();
$('.note').css({'height':w + 'px'});

answered Oct 21 '14 at 18:41

Phani

796
7
21

score 0 · Answer 2 · answered Oct 21 '14 at 18:37

0

Set the width in % and then create an equal height by giving the element padding-bottom: 100%;.

answered Oct 21 '14 at 18:37

Seth Warburton

2,234
1
16
17

Make square divs to occupy whole screen

2 Answers2