CODEWITHSUNDEEP
javascriptjquerycss
alex
alex

Reputation: 25

How can I resize these divs while keeping the same layout?

Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:

http://i.imgur.com/a0vAo.png

(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/

The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.

I've experimented with liquid values in CSS, but I can't get the positioning right.

Please help.

Upvotes: 1

Views: 297

Answers (1)

gabitzish
gabitzish

Reputation: 9691

Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.

Upvotes: 1

Related Questions