Member Avatar for greenglow

This Wordpress site looks fine on most browsers but is really breaking up on Mac Safari 3.2 and FF on Mac.

The right sidebar pushes down below the bottom of the middle column.
Can anyone tell me where to look for the problem.
A screen shot from BrowserShots is enclosed that shows the problem.

Thank you

OFR_test.jpg 129 KB
  • 1 Contributor
  • 2 Replies
  • 119 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by greenglow

Dani AI

Generated

The screenshots posted by show the classic symptom where a floated sidebar "drops" under the main column in Mac Safari/Firefox while other browsers render it OK. That behavior is usually not a mysterious browser bug but a layout math issue: the container’s computed widths (including padding, borders and margins) slightly exceed the available space, or floats are not properly contained — and Mac builds of WebKit/Gecko can differ in subpixel rounding and font metrics, which makes the overflow show up there first.

Quick troubleshooting checklist

  • Inspect computed widths in Safari/Firefox dev tools and look for any element whose computed width + padding + border + margin exceeds the parent width.
  • Temporarily give each column a distinct outline/background to visualize where the overflow starts.
  • Confirm whether the floats are being contained; if not, a block formatting context will fix many float-drop problems (Block formatting context).

Small, practical fixes (examples)

  • Create a BFC on the wrapper (contains floats):

    .wrapper {
overflow: auto; /* or hidden; establishes a BFC to contain floats */
}

  • Make width math simpler with border-box:

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

    (see box-sizing)

  • Consider switching to Flexbox for stable column layouts:

    .row { display: flex; }
.main { flex: 1; }
.sidebar { width: 300px; }

    (see Flexbox basics)

Notes and cautions
Using overflow:hidden or overflow:auto can affect visible overflow (shadows, dropdowns) so test UI side effects. Percent widths + padding often produce 1px rounding issues across engines; allow a few pixels of slack or use calc()/flexbox to avoid exact-fit math. For a practical read on floats and containment, see the CSS‑Tricks guide: All About Floats.

Member Avatar for greenglow

I've attached a second screen shot. In this case the right sidebar disappears in FF 3.1 and Safari 4.0.

Jaiame_FF3-1.jpg 96.78 KB
Member Avatar for greenglow

Resolved-I changed the margins on the sidebars-looks like Safari and FF latest and beta versions like a bit more room than the others.

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.