Member Avatar for theonlylos

I am currently trying to roll out a custom Wordpress site for a client (it's currently being hosted at ) however I've been having trouble getting the sidebar to position next to the content.

I've tried resizing everything so it fits within the wrapper and much more, but nothing I do has fixed the issue so any assistance is greatly appreciated.

Also, I am building the theme on the Buffet Framework, if that is relevant.

Edited by theonlylos because: n/a
  • 3 Contributors
  • 2 Replies
  • 251 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by double_virginia

Dani AI

Generated

A few common causes when a WordPress sidebar drops below the content: the combined widths (content + sidebar + padding/margins) exceed the wrapper; floats aren’t being contained; an element (image, long URL, pre/code block) forces overflow; or the sidebar markup sits outside the wrapper. As described, the symptom is usually a CSS layout issue. ’s point about the Buffet framework being old is relevant: legacy frameworks can use layout patterns that conflict with modern browsers, which explains ’s question about relevance.

Float-based fix (widely compatible)

/* contain floats */
.wrapper:after {
  content: "";
  display: table;
  clear: both;
}

/* simple two-column float layout */
.main-content { float: left; width: 68%; box-sizing: border-box; }
.sidebar      { float: right; width: 300px; box-sizing: border-box; }

/* prevent media from breaking layout */
img { max-width: 100%; height: auto; }

Modern alternative using Flexbox (cleaner, responsive)

.wrapper { display: flex; align-items: flex-start; gap: 20px; }
.main-content { flex: 1; min-width: 0; } /* min-width:0 prevents flex-child overflow */
.sidebar { flex: 0 0 300px; width: 300px; }

Quick troubleshooting checklist: inspect computed widths in the browser devtools to find any element wider than the wrapper; look for unbroken strings or images and apply max-width:100%; verify the sidebar HTML is inside the wrapper and not after a clearing element; check for position:absolute or JS that repositions elements; temporarily add visible outlines to spot overflowers. Changing box-sizing or switching layout methods can affect other styles, so test changes in devtools and apply fixes via a child theme or CSS override. If the Buffet base proves brittle, migrating to a maintained starter or modern theme often saves time.

Member Avatar for double_virginia

What does it have to do with the initial post?

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.