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:

  • 2 Contributors
  • 1 Reply
  • 114 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

asked for two stacked boxes on the left with a single box to their right. ’s float-based example is a valid, classic solution, but floats bring caveats: the floated element must have a width, the parent can collapse unless cleared, and layout can break when margins/padding exceed the container. For modern, simpler control, use Flexbox (or Grid) so the left column becomes a vertical stack and the right column sits alongside it without float-clearing hacks.

A compact Flexbox pattern:

HTML

<div class="layout">
  <main class="left">
    <div class="top">Top content</div>
    <div class="bottom">Bottom content</div>
  </main>
  <aside class="right">Right column</aside>
</div>

CSS

.layout { display:flex; gap:1rem; align-items:flex-start; }
.left   { flex:1; display:flex; flex-direction:column; gap:1rem; }
.right  { width:280px; }
@media (max-width:700px){ .layout{flex-direction:column} .right{width:auto} }

Notes and troubleshooting:

  • Apply box-sizing: border-box globally to avoid unexpected width overflow when adding padding/borders.
  • Flexbox defaults (align-items: stretch) will match column heights; set align-items:flex-start to avoid that if undesired.
  • If using floats (legacy), ensure the parent is cleared (clearfix or overflow:auto) and the floated element has a fixed width.
  • If the right column drops below the left stack, inspect computed widths: total widths + gaps/margins must fit the container. Also check for unclosed tags or stray margins.
  • Prefer semantic elements (<main>, <aside>) for accessibility and clearer structure.

Further reading: MDN Flexbox and A Guide to Flexbox — CSS-Tricks.

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.