web design

pimg alt=”typoginspir.png” src=”http://www.fortysomething.ca/mt/etc/entry_images/typoginspir.png” width=”125″ height=”125″ style=”float:left; text-align:left; margin:10px 20px 10px 0″ //p

pToday’s Morning Coffee Links contain some great resources for design, web design and just general all-round design inspiration. Hand picked and well worth browsing and/or bookmarking!/p

pa title=”60 Most Stunning Typography Inspiration of All Time | The Design Inspiration” href=”http://thedesigninspiration.com/articles/60-most-stunning-typography-inspiration-of-all-time/”60 Most Stunning Typography Inspiration of All Time/a/p

pMore below …/p pa href=”http://www.sitepoint.com/blogs/2009/06/11/you-had-me-at-hello-10-examples-of-website-introductions/”http://www.sitepoint.com/blogs/2009/06/11/you-had-me-at-hello-10-examples-of-website-introductions/You Had Me At Hello: 10 Examples of Website Introductions (Sitepoint) raquo;/a/p

pa href=”http://www.positivespaceblog.com/archives/30-more-pdf-documents/”30 More Essential PDF Documents Every Designer Should Download (Positive Space Blog) raquo;/a/p

pa href=”http://www.webdesignbooth.com/60-awesome-grunge-font-that-every-designer-should-collect/”60+ Awesome Grunge Fonts That Every Designer Should Collect (Web Design Booth) raquo;/a/p

pa href=”http://www.instantshift.com/2009/06/10/88-single-page-website-designs-for-design-inspiration/”br /
88 Single Page Website Designs for Design Inspiration (Instant Shift) raquo;/a/p

pa href=”http://www.smashingapps.com/2009/06/08/50-creative-masterpieces-of-logo-designs-using-gradient-effects.html”br /
50+ Creative Masterpieces of Logo Designs Using Gradient Effects (Smashing Apps) raquo;/a/p

pa href=”http://www.texturelovers.com/”Texture Lovers: Free Textures, Inspiration and Tutorials raquo;/a/p

pa href=”http://webdesignledger.com/freebies/100-new-and-beautiful-seamless-patterns”100 New and Beautiful Seamless Patterns (Web Design Ledger) raquo;/a/p

pa href=”http://vandelaydesign.com/blog/galleries/gallery-sites-launch/”5 Niche Design Galleries (Vandelay Design) raquo;/a/p

pa href=”http://www.thedesigncubicle.com/2009/06/50-alluring-typography-and-grid-focused-websites/”50 Alluring Typography and Grid Focused Websites (The Design Cubicle) raquo;/a/p

pa href=”http://www.noupe.com/photoshop/photoshop-brushes-and-how-to.html”18 Absolutely Stylish Designs Using Photoshop Brushes (Noupe.com) raquo;/a/p

pa href=”http://interactiveblend.com/blog/online/50-websites-to-follow-if-you%E2%80%99re-into-web-design/”br /
50 websites to Follow if You’re Into Web Design (Interactive Blend) raquo;/a/p

pa href=”http://dzineblog.com/2009/06/30-best-photoshop-web-layout-design-tutorials.html”30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites (DZineBlog) raquo;/a/pimg src=”http://feeds2.feedburner.com/~r/fortysomething/etc/~4/wvQc9o1rilE” height=”1″ width=”1″/

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxes a bit, and about their behavior.

What we haven’t talked about much is the box itself. How is the size of the box calculated exactly? Here is a diagram:

If you are a Firebug user, you might be used to the diagram like this, which does a nice job of showing you the numbers affecting any box on the page:

Notice in both examples the margin is in the white. Margin is unique in that it doesn’t affect the size of the box itself per-say, but it affects other content interacting with the box, and thus an important part of the CSS box model.

The size of the box itself is calculated like this:

What if these values are undeclared?

If padding or borders are undeclared, they are either zero (likely if you are using a css reset) or the browser default value (probably not zero especially on form elements that are commonly not reset).

If the width of a box is undeclared (and the box is a block level element), things get a little weirder. Let’s start with that, and then move on to some other good-to-know stuff about the box model.

The Default Width of Block Level Boxes

If you don’t declare a width, and the box has static or relative positioning, the width will remain 100% in width and the padding and border will push inwards instead of outward. But if you explicitly set the width of the box to be 100%, the padding will push the box outward as normal.

The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

The biggest ass-biter I always find with this is textarea elements, which very much need their widths set to fight the required “cols” attribute, and are unable to have children elements. So you often need the textarea to be explicitly set to 100%, yet have padding as well, pushing it too large to fit. In a static width environment, we often resort to pixel widths that fit, but no such luck in fluid width environments.

Absolute Boxes with No Width

Absolutely positioned boxes that have no width set on them behave a bit strangely. Their width is only as wide as it needs to be to hold the content. So if the box contains a single word, the box is only as wide as that word renders. If it grows to two words, it’ll grow that wide.

This should continue until the box is 100% of the parent’s width (the nearest parent with relative positioning, or browser window) and then begin to wrap. It feels natural and normal for boxes to expand vertically to accommodate content, but it just feels strange when it happens horizontally. That strange feeling is warranted, as there are plenty of quirks in how different browsers handle this, not to mention just the fact that text renders differently across platforms.

Floated Boxes With No Width

The same exact behavior is seen with floated elements with no widths. The box is only as wide as it needs to be to accommodate the content, up to as wide as it’s parent element (doesn’t need to be relatively positioned though). Because of the fragile nature of these width-less boxes, the lesson to take away here is to not rely on them in mission-critical scenarios, like in overall page layout. If you float a column to use as a sidebar and count on some element inside (like an image) to be responsible for holding it’s width, you are asking for trouble.

Inline Elements are Boxes Too

We’ve been kind of focusing on boxes as block-level elements here. It’s easy to think of block-level elements as boxes, but inline elements are boxes too. Think of them as really really long and skinny rectangles, that just so happen to wrap at every line. They are able to have margin, padding, borders just like any other box.

The wrapping is what makes it confusing. A left margin as shown above pushes the box to the right as you would suspect, but only the first line, as that is the beginning of the box. Padding is applied above and below the text like it should be, and when it wraps it ignores the line above its padding and begins where the line-height dictates it should begin. The background was applied with transparency to see how it works more clearly.

See it with your own eyes

Wanna see every single “box” that makes up a page? Try putting this in the stylesheet temporarily:

* {
   border: 1px solid red !important;
}

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don’t set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.

There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.

Let’s take a look at each and then discuss some common uses and quirks.

Visible

If you don’t set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are over-riding it from being set elsewhere.

The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:

Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.

Hidden

The opposite of the default visible is hidden. This literally hides any content that extends beyond the box.

This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (sort of viewing the source). So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.

Scroll

Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.

Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.

Auto

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.

Float Clearing

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared. Like this:

There is more detail about this and floats in general in the article All About Floats.

Cross Browser Concerns

Like most things in CSS, there are plenty of cross-browser quirks with overflow. Here they are:

Scroll bars inside or outside of box?

Firefox puts them outside, IE puts them inside. I believe only IE actually gets this correct (it should be inside).

Make sure to account for this substantial difference.

IE 8 expanding box bug

There are lots of fun new bugs, including some very serious ones that hide entire web pages, with IE. More details here.

Breaking floated layouts

IE 6, 7 and 8 all screw up the default overflow visible and will expand a box horizontally to fit content (likely an image). This is especially painful for layouts built on floated columns, and a single expanded column can push other columns down and cause some pretty seriously borked layouts.

Can scroll bars be styled with CSS?

IE used to allow this in older versions of IE but it has since been discontinued. Like many form elements, scroll bars are not able to be styled through CSS. I don’t have any particular opinion on if that’s a good or bad thing, but I can say that having scroll bars all over the content of a website is ugly and gross. If you need a scrolling solution that is able to be styled, you may want to look to JavaScript.

IE Trick

IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice for preventing horizontal jumps, but isn’t always desirable. To remove this in IE, you can set overflow to auto on the body element.

Demo

Demos for this article taken from this sample page.