Member Avatar for hellobenna

Hello! I am brand new to positioning with CSS. I'm trying to lay out a site, and everything is where I want it to be, except the website isn't scrolling. I'm not sure what I did wrong. Can anyone help? Thanks so much!

Here is a link to the site:

  • 2 Contributors
  • 2 Replies
  • 98 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by hellobenna

Dani AI

Generated

As 's change made the page scroll for , here is a short explanation of why that happens and safer ways to lay out the main container so scrolling works reliably.

When a main wrapper is taken out of the normal document flow or the document is constrained with fixed heights or overflow: hidden, the browser may not grow the page beyond the viewport and no scrollbar appears. Common culprits are positioned/fixed containers, height: 100% on html/body, un-cleared floats, or overflow set to hidden on a parent element.

Quick checklist to diagnose:

  • Inspect html/body for overflow: hidden and remove or change it to auto if present.
  • Look for height: 100% on html/body or wrappers; prefer min-height so content can expand.
  • Check whether floats inside the wrapper are not cleared, making the wrapper height collapse.
  • Use the browser DevTools computed styles to find which element matches the viewport height.

A more robust pattern (avoid taking the whole layout out of flow) is to center a max-width wrapper and let content determine height:

/* center and let content determine height */
.wrapper {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* clearfix for floated children */
.wrapper::after {
  content: "";
  display: table;
  clear: both;
}

If absolute/fixed positioning is required for overlays or headers, keep those pieces small and layered; do not structure the whole page with absolute positioning. For details on the mechanics, see MDN documentation for CSS positioning and overflow.

Recommended Answers

All 2 Replies

Member Avatar for mahavir123 
.wrapper {position:absolute; top: 0px; left: 50%; margin-left: -425px; text-align: left;}

By making
position:absolute;
in your 33.css file, it is working.
Is this what you want?

Edited by mahavir123 because: n/a
Member Avatar for hellobenna 
.wrapper {position:absolute; top: 0px; left: 50%; margin-left: -425px; text-align: left;}

By making
position:absolute;
in your 33.css file, it is working.
Is this what you want?

Yes! Thank you so much for your help!

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.