Recycled Parts: CSS Div Vertical and Horizontal Aligning

This examples below shows you how to align divs vertically and horizontally with CSS classes.

Vertical Div Alignment


	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Vertically Align Divs with CSS</title>

	<style type="text/css">
	html,body{
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
	}

	.wrapper_div {
	width:300px;
	height:300px;
	}

	.top_div {
	height: 25%;
	background-color:#03C;
	}

	.mid_div {
	height: 25%;
	background-color:#3C3;
	}

	.mid2_div {
	height: 25%;
	background-color:#006;
	}

	.btm_div {
	height: 25%;
	background-color:#99C;
	}
	</style>
	</head>

	<body>
	<div class="wrapper_div">
	<div class="top_div"></div>
	<div class="mid_div"></div>
	<div class="mid2_div"></div>
	<div class="btm_div"></div>
	</div>

	</body>
	</html>

Horizontal Div Alignment

First, we need a wrapper class to hold out divs in. Note the "html,body" needs to be instantiated for any div height=100% to work properly:

	<head>
	<title>Horizontally Align Divs with CSS</title>

	<style type="text/css">
	html,body{
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
	}
	.wrapper_div {
	width:600px;
	height:300px;
	}
	.left_div {
	float:left;
	height:100%;
	width:25%;
	background-color:#03C;
	}
	.mid_div {
	float:left;
	height:100%;
	width:25%;
	background-color:#3C3;
	}
	.mid2_div {
	float:left;
	height:100%;
	width:25%;
	background-color:#60C;
	}
	.right_div {
	float:left;
	height:100%;
	width:25%;
	background-color:#99C;
	}
	</style>
	</head>

	<body>

	<div class="wrapper_div">
	<div class="left_div"></div>
	<div class="mid_div"></div>
	<div class="mid2_div"></div>
	<div class="right_div"></div>
	</div>

	</body>

Recycled Parts