1

I would like to have four colored blocks in my content div. Each block should be 50% of the width and 50% of the height of the container: two on the top, and two on the bottom.

When re-sizing the browser they should re-size along with it.

I've tried to make four div elements with 50% height and width, and I've tried to place four images with 50% height and width.

The latter seems to work but scales while maintaining aspect ratio, but I want them to stretch to fill the content div.

kristian
  • 22,731
  • 8
  • 50
  • 78
redmac
  • 11
  • 1

1 Answers1

1

Edit:

There's undoubtably a more elegant way, but this would work:

<html><body>
<div style="position:absolute; left:0; top:0; width:50%; height:50%; background-color:blue">A</div>
<div style="position:absolute; left:50%; top:0; width:50%; height:50%; background-color:green">B</div>
<div style="position:absolute; left:0; top:50%; width:50%; height:50%; background-color:yellow">C</div>
<div style="position:absolute; left:50%; top:50%; width:50%; height:50%; background-color:red">D</div>
</body></html>

Original:

If you want the images to stretch to fill the content, it is unavoidable that the aspect ratio will change when the window size changes.

It sounds like what you actually want is to have the blocks keep the same aspect ratio, but scale to be as large as possible within the window, leaving extra space on the bottom or side if necessary.

Have a look at this question. You can set up a single div with the aspect ratio you want, and then split it internally into your four parts.

Community
  • 1
  • 1
Russell Zahniser
  • 16,188
  • 39
  • 30
  • Thanks for your response. In fact I don't want the blocks keep the same aspect ratio. But they do. So I want them to stretch to fill the content div and be all the same size. – redmac Mar 21 '13 at 16:53