Member Avatar for daniel.conlinjr.1

im working on a theme build and im having troubble getting the sidebars to appear on the same level as the content, as of right now they are displaying below the main content and they need to be even with the top of it.... any help would be greately appreciated.

  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by tdrosiadis

Dani AI

Generated

Quick practical note for — is right that both the HTML structure and the CSS control whether the sidebars sit beside or below the article. A modern, robust approach is to make the wrapper that contains the two asides and the article a single horizontal layout using CSS Flexbox or Grid; that keeps the tops aligned and avoids fragile width math.

Example using Flexbox (apply to the row that contains left-aside, article, right-aside):

.main-row {
  display: flex;
  align-items: flex-start; /* keeps tops aligned */
}

.sidebar {
  flex: 0 0 220px; /* fixed column width */
}

.article {
  flex: 1 1 auto; /* grows to fill remaining space */
}

Quick troubleshooting checklist (use browser devtools to inspect computed styles while testing):

  • Confirm the three elements are direct children of the same wrapper element.
  • Look for any child that is wider than its column (large images, long words, embeds); these force wrapping.
  • Apply box-sizing: border-box globally so padding/borders don’t inflate column widths unexpectedly.
  • Verify the CSS file is loading and no higher-specificity rule is forcing block layout on the asides or article.
  • Ensure a valid DOCTYPE so layout modes behave predictably.

Flexbox is widely supported and simplifies alignment; if old-browser support is required, classic column techniques will need containment/clearing and careful width math. For reference guides see MDN’s Flexbox overview (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and the CSS-Tricks Flexbox guide (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Recommended Answers

All 2 Replies

Member Avatar for daniel.conlinjr.1

Member Avatar for tdrosiadis

Having seen your site you have to change a few things to your html and your css.
Firstly you have to transfer your first <aside> (left one) above your article and your second one (right) below.
Secondly in your css file, give your left <aside> a width of 23% (width:23%;) and float it left (float:left). Float also left your <article>. Lastly give your right <aside> the same width as of the left one and float it right (float:right;). You will have the result you want.

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.