Geek Answers Handbook

Divide the screen into 4 rectangles with 50% height 50% width

I am having problems splitting the screen into 4 divs with a width and height of 50%. There is no problem to get 50 percent width and swim around, but how can I make each one have a height of 50% of the screen?

+4
source share
1 answer

I assume that you used to set the width; well the same thing can be used for your growth.

For instance:

<html> <head> </head> <body> <div style="background-color:red; width:50%; height:50%; float:left"> </div> <div style="background-color:blue; width:50%; height:50%; float:right"> </div> <div style="background-color:green; width:50%; height:50%; float:left"> </div> <div style="background-color:orange; width:50%; height:50%; float:right"> </div> </body> </html>

If you run this, you will have 4 equal parts on your screen, with the upper left red, the upper right blue, the lower right green, and the lower right orange.

Edit this works with the following styles:

 html,body { padding:0; margin:0; height:100%; min-height:100%; }
+10
source

More articles:


All Articles