Responsive design: How to adjust number of columns? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My client wants to have a screen that, on a sufficiently high resolution monitor, lays out like this:
First name [textbox1a] Translation [textbox1b]
Last name [textbox2a] [textbox2b]
Street [textbox3a] [textbox3b]
Etc. (The screen shows information in 2 languages, but we needn't get into the details of what that's all about for purposes of this question.)
When the screen is too narrow for this to fit -- say on a tablet -- they want this to change to:
First name Translation
[textbox1a] [textbox1b]
Last name
[textbox2a] [textbox2b]
Street
[textbox3a] [textbox3b]
And on a very narrow screen -- say a cell phone:
First name
[textbox1a]
Translation
[textbox1b]
Last name
[textbox2a]
[textbox2b]
Street
[textbox3a]
[textbox3b]
I really don't want to make the labels fixed width because that would prevent a user from resizing the text. With variable width, I can't make everything float:left because then the columns don't line up. I'm tinkering with using display:table-cell et al but this gets tricky because what goes in each row changes. I think I can make that work if I use #media to switch from 4 column to 2 to 1 but that assumes I know the exact number of pixels when to switch layouts, which I don't without making assumptions about the width of the labels.
Any ideas how to do this?

Answer 1

So, the solution I came up with is to check and see which column is the widest. Then apply that width to every column while making the columns 'float'. That way they always line up.
var maxWidth = 0;
$('.box').each(function() {
var width2 = $(this).width();
if(width2 > maxWidth){
maxWidth = width2;
}
});
$('.box').css("width", maxWidth);
Here is a full JSFiddle for you, you can edit the contents of the boxes to change the size of them to test it out.
http://jsfiddle.net/na50mxtj/