Member Avatar for Ruko

Take a look at this:

The navlist is pushing all my content down. How do I avoid that??

conflicting CSS:

#conTOP {
    background-image:url('images/contop.png');
    background-repeat: no-repeat;
    position:relative;
    width: 800px;
    height: 320px;
    top:170px;
}

.navlist {
    background-image:url('images/navlist.png');
    background-repeat: no-repeat;
    position:relative;
    width: 250px;
    height: 600px;
    top:170px;
    left:730px;
}
  • 2 Contributors
  • 3 Replies
  • 74 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Ruko

Dani AI

Generated

initially reported a right-side nav that was "pushing" content down after using vertical offsets; @diafol suggested floats, and later noted the issue was resolved. The behavior seen is common when elements are shifted with relative offsets: the visual move happens, but the original document space remains reserved, so siblings still react as if the element stayed put.

Typical fixes and checks:

  • Understand the difference between position:relative (moves visually but keeps flow space), position:absolute (removed from normal flow; anchor it by making the parent position:relative), and floats (allow a sidebar to sit beside content but require clearing).
  • If floats did not help, common culprits are container widths adding up too large, missing float clearing, or leftover top offsets still reserving space. Clearing the float (clearfix or a block formatting context like overflow:auto / display:flow-root) and removing unnecessary offsets usually resolves the push-down effect.
  • Modern approach: use Flexbox or CSS Grid for a two-column layout. They avoid many float/position pitfalls and are easier to make responsive.

Debugging tips: toggle positioning in the browser DevTools, inspect computed sizes and margins, verify the document has a standards DOCTYPE, and confirm the parent container width allows a sidebar. For reference on behavior and patterns, see MDN: position, MDN: Flexbox basics, and the CSS-Tricks clearfix pattern.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

stop using relatives and use floats instead.

Member Avatar for Ruko

Can someone fix those two parts for me please?

I tried using float and still same result

Member Avatar for Ruko

nvm fixed it now :)

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.