This is how my site currently looks on my PC:

However, when I go on a friend's computer or someone else's with a different resolution, it displays differently. Instead, those circled (or squared) elements break onto the next line for some strange reason.

If anybody can help me to figure out why, it would be most appreciated. This is my site: http://scrawlfx.com

Thank you! =]

Dani AI

Generated

This problem almost always comes down to box math and rendering differences, not "resolution" in the sense of screen pixels. supplied good context and several members pointed in useful directions: was right that fixed widths shouldn’t normally break across resolutions, was right to call out markup/doctype issues, ’s idea about a centered container helps with layout, and correctly flagged the carousel as a likely offender. Below are targeted, practical steps to find the root cause and fixes that work across machines.

Reproduce and measure first

  • Use the browser developer tools to inspect the elements that jump. Look at computed width, margins and padding, and compare the parent container width to the combined width of the floated items.
  • Disable JavaScript briefly to see if the carousel script is setting a larger inline width dynamically.
  • Test with different browser zoom levels and default fonts; font metrics or a zoomed page can change line breaks.

Quick debugging snippets

  • Add a temporary visual outline to spot overflow or mis-sized boxes quickly:
/* temporary only — remove when done */
* { outline: 1px dashed rgba(255,0,0,0.15); }

Practical fixes (pick one that fits your needs)

  • Replace the float row with a no-wrap flex row so items stay on a single line in modern browsers:
.row { display: flex; flex-wrap: nowrap; gap: 10px; }
.row > * { flex: 0 0 auto; }
  • Or use inline-block with parent white-space: nowrap; if supporting older browsers.
  • Use box-sizing: border-box site-wide to avoid surprises when padding/border are added.
  • Ensure images and slides are constrained (e.g., max-width: 100%) so they don’t push the layout wider than intended.

Other checks

  • Confirm a standards DOCTYPE so browsers use the same box model.
  • Validate HTML/CSS to catch unclosed tags or malformed markup that can trigger quirks.
  • After fixes, test at 100% zoom and with different OS/browser/font settings to confirm consistency.

If the carousel is still the culprit, focus on how its script calculates element widths and make it adapt to the parent container rather than hard-coding a larger size.

Recommended Answers

All 11 Replies

What OS and browsers break your design?

Windows. Firefox.

I'm using Windows and Firefox too. Happens on IE, too. Not my IE, though. I think it has to do with screen resolutions.

Screen resolution shouldn't matter since you're not using a liquid layout. Your widths are static.

If it's just one friend's computer that does this I would dismiss it but if there's multiple computers that display the same error than something clearly is amiss.

Yeah, it's more than a couple. \=

try this:
in the main div of the page add these css codes
#AnyDivName{
width: 940px; margin-left:auto; margin-right:auto;
}

and for the inner divs add these codes:
#AnyDiveName {
overflow:hidden;
}
try to keep the inner divs positions relative instead of absolute. Hoping this would be solution.

Still nothing. =\

display arrors are usually caused by html code errors
xhtml creates a slew of errors tht were not previously errors, and is more strict in coding requirements
wrongly coded html puts browsers into quirks mode which is different in most browsers
fix the html and the display errors will likely disappear

What do I have significantly wrong that could produce that error?

BTW, the latest Firefox update fixes that error, but it still happens in most common browsers on computers.

Found an example, btw. A screen cap of my site from Statbrain:

[img][/img]

This is how my site currently looks on my PC:

However, when I go on a friend's computer or someone else's with a different resolution, it displays differently. Instead, those circled (or squared) elements break onto the next line for some strange reason.

If anybody can help me to figure out why, it would be most appreciated. This is my site: http://scrawlfx.com

Thank you! =]

The first of all the mess caused is to correct the element with:
classname= "jcarousel-container jcarousel-container-horizontal" CSS Property
overflow: hiden;

This is to get you started on the right foot!

The first of all the mess caused is to correct the element with:
classname= "jcarousel-container jcarousel-container-horizontal" CSS Property
overflow: hiden;

This is to get you started on the right foot!

Where do you see this? =\ I can't seem to find it.

Where do you see this? =\ I can't seem to find it.

That's silly! :')
I found it pretty fast, if you ask me.
So you are coding a fixed width for 1024x768 screens only?!

OK
The offending element is:

[B]<div class="jcarousel-clip jcarousel-clip-horizontal">[/B] 
 <ul style="width: 1220px; left: 0pt;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
  <li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal">
   <a href="http://scrawlfx.com/2009/09/skate-3-brings-skate-crews-to-consoles-may-2010">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/skate-3-announced.jpg&amp;cat=1&amp;pid=18272" alt="SKATE 3 brings skate cr..." width="150" height="130">
SKATE 3 brings skate cr...
   </a>
  </li>
  <li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal">
   <a href="http://scrawlfx.com/2009/09/star-ocean-the-last-hope-announced-for-ps3">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/Star-Ocean-PS3-Scans_09-15_01.jpg&amp;cat=1&amp;pid=18253" alt="Star Ocean: The Last Ho..." width="150" height="130">
Star Ocean: The Last Ho...
   </a>
  </li>
 <li jcarouselindex="3" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal">
   <a href="http://scrawlfx.com/2009/09/shane-kim-announces-retirement-from-microsoft">
    <img src="" alt="Shane Kim announces ret..." width="150" height="130">
Shane Kim announces ret...
   </a>
  </li>
  <li jcarouselindex="4" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal">
   <a href="http://scrawlfx.com/2009/09/the-first-15-minutes-of-bayonetta">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/bayonetta-first-15.jpg&amp;cat=1&amp;pid=18237" alt="The first 15 minutes of..." width="150" height="130">
The first 15 minutes of...
   </a>
  </li>
<!-- The content will be dynamically loaded in here -->
 </ul>
</div>

You try find its CSS andd ad that line to its existing css declarations or write a new one ...

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.