[HTML & CSS] 4-way screen split

Conrad11 · 8 Feb 2010 at 13:40

I am looking to split the screen into 4 divs. With two on top and two on bottom.

Each div has 50% width and 50% height.

How do I do this in CSS?

Thanks.

GravyMonster · 8 Feb 2010 at 13:57

Code:

<html>

<head>
	<title>Test</title>
	<style type="text/css">
		BODY, HTML { height: 100%; margin: 0; padding: 0; }
		#container { width: 100%; height: 100%; }
		DIV.quadrant { 
			width: 50%;
			height: 50%;
			float: left;
		}
		#div1 { background-color: #F00; }
		#div2 { background-color: #0F0; }
		#div3 { background-color: #00F; }
		#div4 { background-color: #FF0; }
		
	</style>
        <!--[if IE]><style type="text/css">#container { width: 99%; }</style><![endif]-->
</head>

<body>
	<div id="container">
		<div id="div1" class="quadrant">&nbsp;</div>
		<div id="div2" class="quadrant">&nbsp;</div>
		<div id="div3" class="quadrant">&nbsp;</div>
		<div id="div4" class="quadrant">&nbsp;</div>
	</div>
</body>

</html>

Float is your friend.

*edit*
Fixed to work in IE, as it's totally standards compliant and awesome :rolleyes:

Dj_Jestar · 8 Feb 2010 at 14:17

missing the closing </style> tag in the conditional comment.

GravyMonster · 8 Feb 2010 at 14:20

I have no idea what you're talking about

unwashed potato! · 8 Feb 2010 at 14:40

would it be better to use display: inline-block in this case as then you wont have issues later with the divs being floated around?

Dj_Jestar · 8 Feb 2010 at 14:54

inline-block is still widely unsupported.

_TubbZ_ · 8 Feb 2010 at 22:39

I just tried that out, it worked nicely in chrome, but the boxes jump around in IE when you resize the window... :rolleyes:

no idea how to fix it just it looked like something i needed too

Tripnologist · 8 Feb 2010 at 23:23

Yeah, inline-block tends to only work cross browser on elements which are inline by default such as a's.