How to align divs horizontally in a consistent way?

Question

In my HTML, I want to align 8 colored divs horizontally separated by constant space. I have a <table> as container for these divs. The size is specified in percent(%) instead of pixels(px) for scaling.

When a user resizes the window the divs also get resized but not in equal proportion (i.e. height!=width) and results in looking like a rectangle rather than a square. I'd like to align these divs in such a way that when a user resizes the window the divs also get resized in equal proportion, and also retain their square shape.

It would be good to go back through and accept answers to questions that you've asked. — bassplayer7, Feb 27 '12 at 15:18

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

There is no pure HTML/CSS solution to scaling divs in a manner which maintains their proportions - you'll need to use some scripting. See a JQuery solution you could use here: Scale a div to fit in window but preserve aspect ratio

edited May 23 '17 at 10:34

Community

1
1

answered Feb 27 '12 at 12:06

Karl Barker

11,095
3
21
26

I'm not voting you down because I'm not sure exactly what you meant in that statement, but if you meant that there is no way to preserve a div's aspect ratio using pure HTML/CSS, you are mistaken. See the two approaches I presented in the page you linked. – ʇsәɹoɈ Oct 01 '12 at 23:35

score 0 · Answer 2 · answered Feb 27 '12 at 14:38

0

You can place a transparent square GIF image (1×1px is enough) with width: 100% into each block. The dimensions of the image and its container will be maintained constant automatically regardless of particular calculated pixel value of width: 100%.

answered Feb 27 '12 at 14:38

Marat Tanalin

13,927
1
36
52

How to align divs horizontally in a consistent way?

2 Answers2