CSS positioning on my Web page causes overlap?

I know exactly what you're talking about, and if you push around the window size on this page, you'll find that there are some weird overlaps and visual effects as the window gets exceeding narrow.

Try it. Right now. I know you want to. :-)

The problem is that when you have blocks of information specified, you're really defining containers that have fixed attributes including minimum width and height. Typically, if you have something like <div><img src="someimage.jpg" height="100" width="400" /></div> then your container is constrained to the same size as the element, in this case 100x400.

If you have two of these side by side on a browser window that's only 700 pixels wide total, say, then the browser is in a pickle: does it chop off one of the graphics? Render the page and slap down a horizontal scrollbar? Or ?

Now, let's add to the challenge by having the CSS containers positioned using Cascading Style Sheet specifications: <div style="left:20px;width:100px"> Now the browser must put this container 20px from the left margin, regardless of how wide the page is. You can see where rendering can be tricky!

If you want to force the page to have a horizontal scrollbar, then I would suggest that you have an enclosing container that has the full, all-element width specified (e.g., <div style="width:800px">). If, instead, you'd rather have the element have its own scrollbar while the rest of the page lays out however it can in the browser window, experiment with the CSS attributes width and overflow: scroll.

I hope that all helps. You might find it helpful to grab a copy of my new book Creating Cool Web Sites with HTML, XHTML and CSS too.