Member Avatar for Roxanne

I'm making a page and and I'm stuck trying to add a sidebar without it pushing the middle frame down.

Here is my HTML file:

This is what I'm trying to get.
[IMG]http://img.photobucket.com/albums/v624/leereloaded/TSUNAMI.gif[/IMG]

Any help?

  • 4 Contributors
  • 3 Replies
  • 223 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by helloadam

Dani AI

Generated

A short, practical guide to keep a sidebar beside the main column without "pushing" it down. ’s column/table idea will work, but modern CSS gives cleaner, more maintainable options. Two reliable patterns are shown below: a simple float-based fix (works in very old browsers) and modern Flexbox/Grid layouts (recommended today). Each snippet assumes a wrapper element that contains both sidebar and main content.

Float-based (quick fix for legacy support)

<div class="wrap">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main column</main>
</div>
.sidebar { float:left; width:200px; }
.content { margin-left:200px; } /* keeps content beside the float */
.wrap::after {
  content:"";
  display:table;
  clear:both;
}

Floats are removed from the normal flow and require clearing or containment so the following block doesn’t drop under them. Use the clearfix (::after) or a block-formatting-context technique to contain floats. (developer.mozilla.org)

Avoid width math errors: set the universal box-sizing rule so padding/borders don’t make columns overflow the container.

*, *::before, *::after { box-sizing: border-box; }

This prevents subtle wrapping when you add padding or borders. (developer.mozilla.org)

Preferred modern approach (responsive, simpler)

/* Flexbox: simple two-column */
.wrap { display:flex; align-items:flex-start; }
.sidebar { width:200px; }
.content { flex:1; }
/* Grid: precise column control for more complex layouts */
.wrap { display:grid; grid-template-columns:200px 1fr; gap:16px; }

Flexbox is great for straightforward two-column layouts; Grid is ideal when you need explicit column/row placement. (developer.mozilla.org)

Troubleshooting checklist: confirm a standards doctype is present (no quirks mode), verify total widths plus padding/borders do not exceed the container, and inspect computed box sizes in browser devtools. If experimentation is messy, start with the flexbox snippet — it usually resolves the "sidebar drops" symptom quickly. (developer.mozilla.org)

(As joked, “Advanced enough?” — Flexbox/Grid should be, and they will make future changes much easier than table layouts. ’s reaction points out that simple jokes aside, fixing the flow/width rules is the real solution.)

Recommended Answers

All 3 Replies

Member Avatar for Dani 
<table width="100%" border="0">
	 <tr>
		 <td width="200"> <IFRAME ...... /> </td>
		 <td valign="top">
 
				 .......
 
		 </td>
	 </tr>
</table>
Member Avatar for mikeSQL

Advanced enough for ya?

Member Avatar for helloadam

lol.. not to be mean or anything..

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.