Member Avatar for cambridge77

Hi,
Am trying to get away from flash + new to jquery.
I know there is an obvious problem in the Css or js but the more I change things around the worse it gets. I want the gallery up next to the right of the nav column. Sick of pulling hair........

thanks

  • 2 Contributors
  • 1 Reply
  • 187 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ctaylo21

Dani AI

Generated

Short expert note: this is a classic float/clear/width conflict. wanted the gallery to sit to the right of the nav column; correctly flagged a clearing rule in the gallery stylesheet as the immediate culprit. Confirm which rule is active with browser developer tools (inspect the gallery element and check the computed styles for any clear value), then test removing or overriding that rule in the inspector to see the effect instantly.

Two practical fixes that work reliably today:

  • Preferred (modern): make the outer container a flex row so the nav and gallery live side-by-side regardless of internal clears.
#wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
#nav { flex: 0 0 220px; }      /* adjust to the nav column width */
#gallery { flex: 1 1 auto; }
  • Classic (float-based): keep floats but ensure the surrounding container is cleared so floats don’t collapse or push elements unexpectedly.
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Additional troubleshooting tips and cautions: place any override rules in a stylesheet loaded after the plugin CSS rather than editing the plugin file (editing is OK if maintained locally). Avoid !important except as a last resort. Verify total horizontal space: nav width + gallery width + margins must be less than the wrapper width — box-sizing differences or fixed heights can force wrapping. Temporarily add visible outlines or background colors while debugging to see element boxes. Check for HTML errors (missing closing tags can break layout) and for plugin rules that use absolute positioning or inline styles — those may need a different approach to override.

Member Avatar for ctaylo21

Just from glacing at the page you should remove the clear: left from jquery.ad-gallery.css line 171

#wrapper #gallery {
clear: left;   //remove this
float: right;
height: 600px;
width: 600px;
}
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.