Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's causing the background in a container to be cut off when window is resized smaller?

Tags:

browser

css

My website has the typical container that is centered in the middle (very similar to Digg's V4 website actually). The problem I'm having is that when resizing the window smaller than the container's width, anything with a background in the container appears to be cut off according to the window's width. Digg's website actually has the same problem as mine too. To illustrate, I've posted screenshots describing the issue. The first screenshot has the window resized smaller than Digg's container width (notice the horizontal scrollbar at the bottom).

Window has been resized smaller than Digg's container width

Now the second screenshot shows what happens when we scroll to the right. Notice that anything within the container with a background has been cut off!

The backgrounds have been cut off

To reproduce this, just go to Digg's website and resize the browser window to around 600px and scroll to the right. Is this a fairly common problem with a fairly common solution? I tested this using Firefox 3.

like image 677
axsuul Avatar asked Nov 14 '22 07:11

axsuul


1 Answers

Set min-width on the problem div.

like image 56
Complainingest Avatar answered Dec 29 '22 12:12

Complainingest