Member Avatar for Chosen13

Help me please, I have a problem on my user page. As you can see, the boxes are moving into strange places, the badges should float on the right.

Example: .

But on pages where the description isn't long, it works right:

http://www.stickmin.com/User.php?ID=1.

Thanks, please tell me what is wrong. I have the divs floating right.

  • 3 Contributors
  • 3 Replies
  • 130 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Chosen13

Dani AI

Generated

The behavior you describe (badges floating correctly on short descriptions but dropping or overlapping when the description is long) usually comes from markup and float-containment issues rather than the float rule itself. , the first checks should be structural: validate the HTML, inspect the DOM in DevTools, and confirm each floating element sits inside the intended parent element. was right to point at validation — unclosed tags or misnested elements will change how floats are laid out.

Quick debugging steps

  • Use the browser inspector to outline boxes (add temporary borders) and watch how elements resize as content grows.
  • Temporarily remove the floats in DevTools to see the natural flow. If layout changes drastically, the float containment is the culprit.
  • Look for unclosed tags, stray wrappers, or missing closing tags around the description area; these are common when length changes reveal the bug.

Practical fixes (pick one that fits your layout)

  • Clearfix on the parent container:
    .clearfix::after {
content: "";
display: table;
clear: both;
}
  • Force a new formatting context (modern):
    .user-container { display: flow-root; }
  • Flexbox layout (recommended for predictable alignment):
    .user-row { display: flex; align-items: flex-start; }
.user-badges { margin-left: auto; }
  • Absolute-position the badges when they must be visually pinned (use with caution):
    .user-container { position: relative; }
.user-badges { position: absolute; right: 10px; top: 10px; }

Final checklist

  • Validate HTML; fix any errors.
  • Ensure the badges and description are in the correct parent element.
  • Apply a clearfix or use flexbox/flow-root so the parent contains floats.
    If the problem persists after these steps, use the inspector to capture the computed box sizes and paste the relevant HTML structure so the exact broken element can be identified.

Further reading: MDN on floats and display (see MDN: float and ), and a practical clearfix pattern at CSS-Tricks: Clearfix.

Recommended Answers

All 3 Replies

Member Avatar for karol33

Stickmin Testbed Video it nice but what your site gonna be about? there is actually lots to be done

Member Avatar for Chosen13

Thanks, and it's going to be a site where your character is a Stickman and you draw maps and upload them to the site, and you can add interactivity and visit maps with friends.

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.