Member Avatar for abtsupport

I am trying to put two columns below one column, with a column on the right along side the entire thing.
the outcome would be something like:

B A N N E R
NAVIGATION
LEFTCONTENT__R
VERT1 VERT2__I
____________ G
____________ H
____________ T
FOOTER
COPYRIGHT

The problem is getting the right column to align properly. It keeps posting below the left content column. Clicking on the banner will show you that the left and right can line up properly. I will link you to the page in progress, but it will be changing a lot as I fumble with it so it may not be a good reference.

<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div class="content">

<div id="column_left">
<div class="column_left">

left column content here
</div>
</div>

<div id="plugin_left_vert_1">
<div class="plugin_left_vert_1">

left vertical 1 content
</div>
</div>

<div id="plugin_left_vert_2">
<div class="plugin_left_vert_2">

left vertical 2 content
</div>
</div>

<div id="column_right">
<div class="column_right">

right column content

</div>
</div>

<div class="clear"></div>

</div>
</div>

footer here
copyright here
</div>
</body>
</html>

I can post some messy css too if you need it.

Thanks in advance for you assistance.

  • 3 Contributors
  • 2 Replies
  • 196 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by karol33

Dani AI

Generated

pointed toward changing DOM order or using floats, and suggested absolute positioning. Both approaches can work, but they miss a few practical pitfalls that make the right column “drop” under the left block. The usual causes are: the two columns (plus padding/borders) exceed the wrapper width, an image or long word is forcing overflow, or a float/clear is misused. A modern, robust fix is to treat the page as two sibling columns and let CSS handle the heights.

Use Flexbox so the left column stacks its three internal blocks while the right sidebar stays alongside and stretches to the same height as the container:

<div class="layout">
  <div class="left">
    <div class="main">…</div>
    <div class="vert">…</div>
    <div class="vert">…</div>
  </div>
  <aside class="right">Sidebar content</aside>
</div>
.layout { display:flex; align-items:flex-start; gap:12px; box-sizing:border-box; }
.left   { flex:1; display:flex; flex-direction:column; gap:8px; }
.right  { width:260px; flex-shrink:0; }

If you must support very old browsers, the float approach works but requires care: float the sidebar (or both columns), ensure the left column’s effective width = wrapper width − sidebar width, and apply a clearfix on the wrapper (use the ::after method rather than an empty .clear div).

Quick troubleshooting checklist:

  • Verify wrapper width and that left + right + padding + borders do not exceed it (check computed values in DevTools).
  • Temporarily add distinct background colors or outlines to each column to see overflow.
  • Look for unclosed tags or inline elements (images/iframes/long strings) that force extra width.
  • Use box-sizing: border-box to make width math easier.

Flexbox is simplest and responsive; use float only as a fallback.

Recommended Answers

All 2 Replies

Member Avatar for sourcebits

I am trying to put two columns below one column, with a column on the right along side the entire thing.
the outcome would be something like:

B A N N E R
NAVIGATION
LEFTCONTENT__R
VERT1 VERT2__I
____________ G
____________ H
____________ T
FOOTER
COPYRIGHT

The problem is getting the right column to align properly. It keeps posting below the left content column. Clicking on the banner will show you that the left and right can line up properly. I will link you to the page in progress, but it will be changing a lot as I fumble with it so it may not be a good reference.

<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div class="content">

<div id="column_left">
<div class="column_left">

left column content here
</div>
</div>

<div id="plugin_left_vert_1">
<div class="plugin_left_vert_1">

left vertical 1 content
</div>
</div>

<div id="plugin_left_vert_2">
<div class="plugin_left_vert_2">

left vertical 2 content
</div>
</div>

<div id="column_right">
<div class="column_right">

right column content

</div>
</div>

<div class="clear"></div>

</div>
</div>

footer here
copyright here
</div>
</body>
</html>

I can post some messy css too if you need it.

Thanks in advance for you assistance.

Declare the right column before left column in HTML or float left column towards left.

Member Avatar for karol33

in my opinion the easiest way is to for <div> 'content' input position:relative; then for every <div> inside content like <div id="plugin_left_vert_1"> insert position:absolute; and then give values like
position: absolute;
height: 110px;
width: 200px;
left: 5px;
top: 0px; or
position: absolute;
height: 80px;
width: 400px;
left: 250px;
top: 28px;
check thiis out for every of your <div> inside content <div>

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.