Member Avatar for Grantmitch1

Okay well im practising my CSS and HTMl skills yet again and have came across a problem.

If you look at this image, you can see my site is perfectly fine. The text is where it should be.

Image:

No the text is fine, the navigation looks funny (it only looks funny in the design view. In the browsers and preview it looks perfect).

However, when I preview it or use the internet it does this:

Image:

See its in design view but it doesnt stop. The text just carries on with the scrollbars getting bigger.

Where I put the white and red lines is where it needs to stop but it doesnt.

Can anyone help me please.
Thank you,
Regards,
Grant

  • 3 Contributors
  • 7 Replies
  • 109 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Grantmitch1

Dani AI

Generated

A quick recap and practical checklist based on this thread: solved the runaway scroll by removing a CSS rule that prevented normal wrapping, and was right to ask for the HTML/CSS — inspecting computed styles is the fastest way to find the culprit.

Common causes to check (use the browser inspector to view computed styles):

  • long unbroken strings (URLs, long words) that force the box wider than its parent
  • CSS such as white-space set to prevent wrapping
  • elements with fixed widths or display:inline-block that exceed the container
  • overflow settings on parents that allow content to expand the page

Relevant references for how those properties work are here: white-space and overflow-wrap.

A simple, defensive CSS pattern to keep content inside its container:

.container {
  max-width: 960px;
  box-sizing: border-box;
  overflow-wrap: break-word;  /* modern */
  word-wrap: break-word;      /* legacy */
  overflow: auto;
}

Notes on the rules above: max-width prevents the box from expanding past a desired size; box-sizing keeps padding inside that width; overflow-wrap allows long words to break; overflow:auto prevents the element from pushing the whole page wider. Also remember WYSIWYG/design views in editors can differ from real browsers, so always verify the problem in actual browser DevTools and post the minimal HTML/CSS when asking for help, as suggested.

Recommended Answers

All 7 Replies

Member Avatar for nikesh.yadav

i will keep my eyes on reples

Member Avatar for Troy III

Okay well im practising my CSS and HTMl skills yet again and have came across a problem.

If you look at this image, you can see my site is perfectly fine. The text is where it should be.

Image:

No the text is fine, the navigation looks funny (it only looks funny in the design view. In the browsers and preview it looks perfect).

However, when I preview it or use the internet it does this:

Image:

See its in design view but it doesnt stop. The text just carries on with the scrollbars getting bigger.

Where I put the white and red lines is where it needs to stop but it doesnt.

Can anyone help me please.
Thank you,
Regards,
Grant

Try breaking your word ie zzzzzzzzzzzzzzzzzzzzdklksdfzzzzzzzzzzzzzzzzssdlfkjsdlgakjlkzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzsslklzskzlkzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzeeeeeeeeeeeeeeeeeeeeeeeels

with regular white-spaces and see what you get. :D

Member Avatar for Grantmitch1

I have broken it up :)

Still doesnt work.

Member Avatar for Troy III

we're going to neer to see your html and css if posible.

Member Avatar for Grantmitch1

hmm sure ill upload it :)

Member Avatar for Grantmitch1

lol Dont worry about it I have fixed it.

I have no idea why, but I a piece of code telling it not to wrap the text. :)

So... You know it was something I forgot to remove lol

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.