Simple Task: Splitting Div Into 4 Equal Vertical Parts

This seems simple, but I couldn’t find how to do it.

I now have a table with 4 rows, each 25% width in my 800px table.
How can I convert that into divs?

thanks, as always, in advance :slight_smile:

Maybe this works: :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
body, html {margin:0; padding:0; height:100%}
#wrapper {
	margin: 0 auto;
	width: 800px;
	height: 100%;
	background: #ff9;
}
#wrapper div {
	height: 800px;
	height: 100%;
}
#wrapper div div{
	height: 25%;
}
</style>
</head>
<body>
<div id="wrapper">
	<div>
		<div style="background:#9ff"></div>
		<div style="background:#f9f"></div>
		<div style="background:#9f9"></div>
		<div style="background:#f99"></div>
	</div>
</div>
</body>
</html>

I now have a table with 4 rows, each 25% width in my 800px table.
Perhaps the question was 4 rows with 4 cells? In that case, maybe this example could be a start:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
body, html {margin:0; padding:0; height:100%}

#wrapper {
	margin: 0 auto;
	height: 100%;
	background: #ff9;
}
#wrapper div {
	overflow:hidden; /* optional, hide eventual odd pixels overflow */
	width: 800px;
	width: 100%;
	height: 800px;
	height: 100%;
}
#wrapper div div{
	float: left;
	height: 25%;
	width: 25%;
	margin: 0;
}
#wrapper .odd{
	margin-right:-4px; /* avoid wrap when calculated odd pixels are added */
}
</style>
</head>
<body>
<div id="wrapper">
	<div>
		<div style="background:#9ff">1-1</div>
		<div style="background:#f9f">2-1</div>
		<div style="background:#9f9">3-1</div>
		<div class="odd" style="background:#f99">4-1</div>

		<div style="background:#f99">1-2</div>
		<div style="background:#9ff">2-2</div>
		<div style="background:#f9f">3-2</div>
		<div class="odd" style="background:#9f9">4-2</div>
		
		<div style="background:#9ff">1-3</div>
		<div style="background:#f9f">2-3</div>
		<div style="background:#9f9">3-3</div>
		<div class="odd" style="background:#f99">4-3</div>

		<div style="background:#f99">1-4</div>
		<div style="background:#9ff">2-4</div>
		<div style="background:#f9f">3-4</div>
		<div class="odd" style="background:#9f9">4-4</div>
	</div>
</div>
</body>
</html>