
CSS positioning on my Web page causes overlap?I'm having a problem with a title block on one of my sites. When the browser window is below a certain size (about 750px in width), one of my absolute positioned divs overlaps another. How do I make it so that the browser just displays a scroll bar once this minimum size is acheived rather than starts overlapping my divs? 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.
Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon
Categorized:
HTML and CSS
(Article 3934)
Tagged: Previous: Can't install Sun Star Office on Windows XP? Next: Can I use Firefox with AOL? Subscribe!
Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader. Can you help me make my site look somthing like http://www.freewebs.com/revfleethq/ Posted by: Benjeman Washington at April 21, 2007 11:23 AMI have a lot to say, but ...
I do have a comment, now that you mention it!
|
![]()
Search
Find just the answers you seek from among our 1700+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Join the List!
Book Links
|