The CSS Overflow Property 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. 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. 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. Hidden Scroll Auto IE Trick Demo
Son of Suckerfish Dropdowns Single-level Dropdowns Right. Let's not beat around the bush. The initial HTML we're dealing with will look something like this: <ul id="nav"><li><a href="#">Percoidei</a><ul><li><a href="#">Remoras</a></li><li><a href="#">Tilefishes</a></li><li><a href="#">Bluefishes</a></li><li><a href="#">Tigerfishes</a></li></ul></li><li><a href="#">Anabantoidei</a><ul><li><a href="#">Climbing perches</a></li><li><a href="#">Labyrinthfishes</a></li><li><a href="#">Kissing gouramis</a></li><li><a href="#">Pike-heads</a></li><li><a href="#">Giant gouramis</a></li></ul></li></ul> A good wholesome structured unordered list. To set things up we need some basic styling: Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. The CSS specs say that top, right, bottom and left values should offset an absolutely positioned box from its containing block. And there you go. Multi-level Dropdowns There are a few things we need to add to the single-level method. Examples
What Does “width: 100%” Do in CSS? It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved. Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS. First Things First: Blocks Don’t Need 100% Width Most CSS developers understand this concept pretty well, but I thought it would be useful to point it out here as an introduction to explaining how percentages work when used on the width property.
CSS Floats 101 The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Article Continues Below Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. The definition#section1 Let’s start with the definition of a float. A float is a box that is shifted to the left or right on the current line. The float property has four values that we can apply to it: left, right, inherit, and none. Here is a simple example like the magazine reference above, Example A and the corresponding markup: How floats behave#section2 Nothing too complex, but still pretty cool right? Let’s look at a few more examples. In the clear#section3
CSS Positioning 101 If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 The static and relative position properties behave like your childhood blocks—they stack as you would expect. Example D shows our new markup.
Understanding CSS Floats Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler. And best of all floats really aren’t that hard to work with once you understand a few key points. What is a Float? A float is a box that is shifted to the left or right on the current line. The float property has 3 values; none, which is the default, left, and right. Floats sit as far left or as far right as possible within the immediate containing div. The Difference Between Floats and Positioning In css there are 3 types of positioning schemes. Relative positioning shifts elements relative to their position in the normal document flow. Note that floats are taken out of the normal document flow, but floats do affect the position of elements around them. How to Effectively Use Floats Column Layouts
2 Column CSS Layout: Fixed Width And Centered One of the more common css layout patterns you’ll come across is the fixed width 2 column layout. It’s relatively easy to code and understand, though it sometimes trips up developers new to css layouts. A few weeks ago I promised to offer boilerplate code for some common css layout patterns. If you prefer to skip the explanation and get right to the code you can view the source of the demo. The HTML The html for this layout is rather simple as you can see below. We have a single div for each of the 4 main areas of the layout — header, content, sidebar, and footer. One thing to note is the structure of the html above follows the structure of the page itself. Later in this post I’ll offer two ways to change the layout above so the sidebar is to the left of the content. The CSS If you’ve already viewed the source code of the demo you’ll note the css like the html is rather simple. Here’s all the css you need for this layout minus the stuff to make the demo more presentable. Floated Elements
Fix Your Site With the Right DOCTYPE! You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers. Article Continues Below You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame. This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags. WHY A DOCTYPE? Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. As mentioned in previous ALA articles (and in other interesting places), DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win. Clearly, this is not what you want. DOCTYPES THAT WORK#section3