两列定宽作业.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列定宽作业</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.parent{
		position: relative;
		right: 50%;
		left: 50%;
		transform:translate(-50%,0);
		width: 810px;
		color: white;
		font: 28px "微软雅黑";
		text-align: center;
		margin-top: 40px;

	}
	.side{
		float: left;
		width: 200px;
		background-color: #be0712;
		height: 200px;
		line-height: 175px;
	}
	.main{
		float: right;
		width: 600px;
		background-color: #5182bb;
		height: 200px;
		line-height: 175px;
	}
	.clearfix:after{
		content: ".";
		display: block;
		clear: both;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}
</style>
<body>
	<div class="parent clearfix">
		<div class="side">侧栏</div>
		<div class="main">主栏</div>
	</div>
</body>
</html>