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:
n0m4d
0
Newbie Poster
ko ko
97
Practically a Master Poster
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.