Member Avatar for n0m4d

How is it possible to have one DIV under another DIV, and then one DIV on the right of those two DIVs?

A bit like this:

http://i48.tinypic.com/2laaqlh.jpg

  • 2 Contributors
  • 1 Reply
  • 98 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for ko ko

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.