2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by ko ko
0

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>One DIV next to two DIVs</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: normal 11pt/1.8em Arial, Sans-serif;
	color: #1d1d1d
	}
#wrapper {
	overflow: hidden;
	/* stay center when the screen increase or decrease */
	width: 998px;
	margin: 0 auto;
	background: #ccc
	}
#right {
	/* float to right */
	float: right;
	/* need width */
	width: 22%;
	margin: 2% 3% 2% 0;
	border: 1px solid gray;
	height: 100%;
	min-height: 150px
	}
#left {
	/* float to left */
	float: left;
	/* need width */
	width: 69%;
	margin-left: 5%;
	background: #ccc
	}
#left_upper, #left_lower {
	margin: 1.3em;
	border: 1px solid gray
	}
</style>
</head>
<body>

	<!-- container wrap all elements -->
	<div id="wrapper">

		<!-- DIV on the right side -->
		<div id="right">
			<h1>Right Side</h1>
		</div>
	
		<!-- DIV on the left which contains two divs -->
		<div id="left">
			<!-- upper div -->
			<div id="left_upper">
				<h1>The first content.</h1>
			</div>
			<!-- lower div -->
			<div id="left_lower">
				<h1>The second content.</h1>
			</div>
		</div>
	</div>
</body>
</html>

Good luck.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.