CSS squares - when resizing

Question

I want to create a website with 6 squares. 3 in the first row and 3 squares in the second row 2. If I resized my window, these squares should be larger and always fit to 100%.

Squares should show like this .

I tried this:

.sq { float:left; display:block; height:96px; width:33%; background-color:#007CC1; margin:0 2px 2px 0; } <a class="sq" href="#"></a> <a class="sq" href="#"></a> <a class="sq" href="#"></a> <div class="clear"></div> <a class="sq" href="#"></a> <a class="sq" href="#"></a> <a class="sq" href="#"></a> <div class="clear"></div> 

but I don’t know how to calculate the height.

How can i do this? Do you have an idea?

Answer 1

How is this possible

HTML

 <div id="container"> <!-- row 1 --> <div class="box">box 1</div> <div class="box">box 2</div> <div class="box last">box 3</div> <div class="clear"></div> <!-- row 2 --> <div class="box">box 4</div> <div class="box">box 5</div> <div class="box last">box 6</div> </div> 

CSS

 #container {width: 90%;} .box {float: left; display: block; background: #c00; color: #fff; text-align: center; width: 30%; margin: 0 5% 5% 0;} .box.last {margin: 0 0 5% 0;} .clear {clear: both;} 

The only problem you may encounter is that they are square, as width is a variable that you cannot set in CSS. Some jQuery may be required to provide this. Something like this ... untested:

JQuery

 $('.box').each(function(){ $(this).height($(this).width()); });