A very handy technique in website design with CSS is the use of overflow control to limit the effect of dynamic content and varying browser window sizes in displacing other elements on your web pages. The technique is, perhaps, most versatile when you realize that you can embed lengthy, relevant HTML-rich content in your documents that may only be of interest to a limited percentage of your audience, without disturbing the main content.
If your website is broken and you can't fix it yourself, call
me. You call in a specialist because he's trained for the job. He knows what's wrong and
how to fix it. Doing it yourself is not always the wisest choice. You can end up wasting time and
losing sales by taking weeks or months trying to learn what I already know about search
engines. Be smart and start getting
more targeted traffic now by ordering my Search Engine
Optimization Package today! You can also request my FREE Search Engine Evaluation.
I'll tell you what you're doing right, what you're doing wrong, and how I can
help your site get its fair share of search engine traffic. There's no charge, no obligation, and no SPAM.
The box on the right is an overflow-controlled <DIV> that uses "overflow:scroll" to allow the blantant advertising content to be confined to a limited area within the document. Note that the content includes an image and other styling controls. The scrolling content is not limited to simply text.
In this case, I used "float:right" to make the inserted content stand flush to the right side of this section of the page. I could have used absolute positioning just as well. You do need to be aware of the need to set the padding of the overflow-controlled <DIV> so that the content doesn't flow flush against the scrollbars.
The overflow property defaults to a setting of "visible" which means that the content is allowed to overflow the parent containing element's boundaries if they are constricted through CSS or other controls. Another option is to set "overflow:hidden", which clips any overflow content - making it invisible. Finally, there is "overflow:auto;" which allows the browser to provide scroll bars if needed. Each of these settings has its place in your website design arsenal.
CSS Tutorial Main Page
Tools and Scripts Menu
Copyright © 2005-2009 by Richard L. Trethewey. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission.
Rainbo Web Design Sitemap
Website Design by Rainbo Design Main Page
