Responsive 3 columns layout - html

Question

I've done the layout for my website which seems to be working fine, but I wanted to make sure I didn't overcomplicated it or used rubbish technique.
So this is how it works, within the DIV I have another div that is a table, and within it I have another 3 divs that are table-cells
<div id="container-main">
<div id="columns-3">
<div class="main-col-left-s"></div>
<div class="main-col-center-s"></div>
<div class="main-col-right-s"></div>
<hr>
<div class="main-col-left-s"></div>
<div class="main-col-center-s"></div>
<div class="main-col-right-s"></div>
</div>
</div>
Each column contains various elements (something like pinterest website).
Now, when I resize, after reaching certain width, I want only 2 colums to be visible, and later only one. While stacking from 3 to 1 is not difficult as it'll happen automatically, the issue was from 3 to 2 columns, so what I did is I gave the middle column display: none property when screen gets to small, so it's not shown (and on the backend side I assume data will be transferred to visible column if the current one is hidden).
Is this solution rubbish and there is far better one, or it'll do?
I do not want to have situation when in one row I have 2 columns and in the next one only one, so this CAN'T happen:
ǀdataǀdataǀ
ǀdataǀ ǀ
-----------
ǀdataǀdataǀ
ǀdataǀ ǀ
but it should always be:
ǀdataǀdataǀ
ǀdataǀdataǀ
-----------
ǀdataǀdataǀ
ǀdataǀdataǀ

Answer 1

Thanks for clarifying your question. Basically, a css-only solution is possible and recommended. It'd be easy to achieve with CSS3 and the new Flexible Box Model, however, browser support is not evenly implemented -even major browsers. So, if you want to support at least all major browsers I'd suggest you stick to the Traditional Box Model which is what my answer is based on.
The solution is quite straight forward:
One block div that serves as the container element
Multiple divs (inside the container div) displayed inline-block which would be your "table cells"
The html structure would be something like below:
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
which would be styled in the following manner...
div.container{
width:100%;
display:block;
font-size:0;
}
div.box{
width:30%;
font-size:40px;
margin:20px 0 0 2.5%;
display:inline-block;
}
This will display 3 boxes aligned horizontally (in one row) in a responsive manner.The font-size:0 declaration is a work-around for the inline-block font spacing issue, you can read more about it if you google it, there are other ways to approach this problem.
Now, in order to display only 2 boxes in one row when the screen width is limited, you can use media queries, as below...
#media all and (max-width:950px){
div.box{
width:47%;
margin:20px 0 0 2%;
}
of course...you can change the max-width constraint to something else. Finally, I've put together a fiddler below in order to add some visuals...
div.container{
width:100%;
height:100%;
padding-bottom:40px;
display:block;
background-color:#eee;
font-family:Arial;
font-size:0;
}
div.box{
color:#666;
background-color:#fff;
width:30%;
font-size:40px;
font-weight:bold;
margin:20px 0 0 2.5%;
line-height:200px;
display:inline-block;
border-radius:6px;
box-shadow:0 4px 5px #ccc;
text-align:center;
*display:inline;
zoom:1;
}
#media all and (max-width:950px){
div.box{
width:47%;
margin:20px 0 0 2%;
}
}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box" style="height:150px">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
</div>
Notice in the example above that intentionally set the height of box 8

Answer 2

You need to use media queries. Try something like this in your css file:
.main-col-left-s, .main-col-center-s, .main-col-right-s {
width: 100%;
}
#media (min-width: 600px) {
.main-col-left-s, .main-col-center-s, .main-col-right-s {
width: 50%;
}
}
#media (min-width: 960px) {
.main-col-left-s, .main-col-center-s, .main-col-right-s {
width: 33.33%;
}
}

Answer 3

you can also use the float: left property of css, for your table cells, that makes what you wished for