Latest Design:Memorys ShadowLatest Design:Azure DesktopLatest Design:Designing with Scrolling DIVsLatest Album: BerserkLatest Avatar


Learn to make a design look like an iframe, but using only DIVs!

Designing with Scrolling DIVs

Question: “Why are design structures always so similar?”… What I mean by this is, the elements of most designs are almost always placed the same. Each design has 3 key elements: Banner, Navigation, and Content. These elements can be put anywhere in reality, but banners are always at the top of the page it seems. Navigation is generally within the content area, in its own little space. And content is left within the negative (empty) space not occupied by the other two elements.

I am by no means insulting the general structure of most designs, just looking for something different. So I intensely thought about this, while viewing some pre-mades. I noticed an iFrame design, and realized that the elemental restrictions do not apply to iframes or popup designs… but why? The answer is resolution. The entire page can be viewed in iframes and popups, so the elements can be assorted in any way they wish. If the same was done with a normal div or table design, then you may have to scroll down just to see the banner, which might make your audience leave before even seeing your banner. Your banner is your attention-getter, it draws your audience, your visitors, into your site and interests them.

So I had this problem: I wanted to make a web design that could have the elements jumbled around for artistic purposes, but I wanted to avoid iframes and popups… The answer is scrolling divs. After playing with lots of css, I discovered a div can scroll within a page, without using any external pages like an iframe would. Today I am going to show you an example of a design with scrolling divs I made, and I will show you some css that will keep it stable and efficient.

(Click For Preview)


DIV: Element Holder {
width: 90%;
min-width: 800px;
max-width: 1100px;
height: 550px;

DIV: Content {
overflow: auto;
width: 90%;
min-width: 300px;
height: 400px;

DIV: Navigation {
width: 170px;
float: right;

DIV: Banner {
width: 200px;
float: left;

The Div you want to scroll, your content, should contain the line overflow:auto;. This is the line that gives your div the scrolling effect. Followed by the overflow, set the divs height, and min-width( if the design is fluid. ). If the design is static, then just define width, not min-width. The reason you set the min-width, and not the width is because your other two elements on this row are static-width. The banner is 200px width, and the navigation is 170px width. If you want to make your design fluid, then just put in a min-width and the css will set the fluid element to the largest available size. You may also set a max-width for the div containing all the elements, so it doesn’t get too large on certain resolutions, that may distort how the design should look and feel.

To be sure that your design is compatible with older web browsers(such as IE 5.5 or below), be sure not to forget the width, because older web browsers will not recognize min-width and max-width.

Don’t feel limited to this example alone, here are a few structure ideas I came up with you can think about as well:

I hope that this article inspired you to invent your own ways of designing. Not to follow the rules of your predecessors, because you can always make your own method. Good luck, have fun, and keep designing.

Thank You

Added December 16, 2011

HayalKarga © Thomas Pienkos 2006 - 2012 · All Artworks © Specified Owners · Disclaimer · XHTML · Users Online