css: How do I make a 'square' div by using css

Question

I'm trying to build a mobile only HTML page which splits the screen into tiles.

I have 5 tiles per row, so the tile width is determined as 20% of the screen. I would like the height to be the same - 20% of the screen width. Note that's hight = 20% of device width, not height. The page will scroll downward if there are more tiles.

Is there any way to do this with CSS? I'd rather not have to javascript unless I have to.

possible duplicate of CSS: A way to maintain aspect ratio when resizing a DIV? — Christofer Eliasson
– Christofer Eliasson, Commented Jul 4, 2012 at 22:58
The other posters question is close enough to be considered a duplicate. Good catch. — Alterlife
– Alterlife, Commented Jul 4, 2012 at 23:24

Chris Perkins · Accepted Answer · 2012-07-04 16:44:13Z

1

I don't believe CSS can do it by itself. Use Javascript, or better and easier, use LessCSS ( lesscss.org )

answered Jul 4, 2012 at 16:44

Chris Perkins

8194 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rlemon Over a year ago

Less is compiled css... by javascript. No js in the runtimes. Fyi - and i dont think less can facilitate this.. SASS maybe but that uses runtime js

Christofer Eliasson Over a year ago

@SimonAndréForsberg JavaScript is just one way to compile less. Have a look at dotless for .Net for instance. I believe there is a ported version for most web related languages these days.

Alterlife Over a year ago

That's too bad. It seems like it would be a fairly frequent use-case.

Collectives™ on Stack Overflow

css: How do I make a 'square' div by using css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related