Might be useful to someone, and no… I didn’t design the site.

Hope this saves people some man-hours.

Inspired by the css-tricks.com solution I decided to try and solve the same problem with out the need for the extra div’s.

Admittedly, the solution I came up with isn’t quite as clean as the one proposed by Chris Coyier but never the less I feel compelled to share it.

Here’s an example

It’s all about lists

firstly, here’s the basic html…

<ul class="equal">
<li class="n1" ><a href="thelink">the first item</a></li>
<li class="n2" ><a href="thelink">Another item </a></li>
<li class="n3" ><a href="thelink">A piece of link text </a></li>
<li class="n4" ><a href="thelink">this also goes somewhere </a></li>
</ul>

That’s right, just good old lists with classes to allow us the differentiate between them.

The css

Firstly, all the list items need to be floated, The floats need to be contained within their parent ul and for simplicity I’ve added a rough and ready css-reset to remove any margins and padding and to remove the default bullets

ul.equal {
padding-left:9em;
height:auto;
zoom:1;/* just for ie - put it in ie only style sheet*/
}
.equal:after{content:".";clear:both;visibility:hidden;height:0px;display:block}
* { margin: 0px;
padding: 0px;
list-style: none outside;
}
.equal li {
min-width:9em;
float:left;
}


The trick, as with Chris Coyier’s solution, the trick is to get three of the four items to each take up a third of the overall width. the trick with this technique is to offset the 1st item using a negative margin and use a padding on the containing ul to prevent anything from droping behind it. You’re now left with a ul which has a width which can be divided into thirds.

.n1{margin-left:-9em;display:inline;/*fix ie6 double margin float bug*/}
.n2,.n3,.n4{width:33.3%!important;text-align:right;width:33.2%;}/*ie6 causes problems due to rounding-up so use a slightly smaller percentage for it.


after the we’ve got the floated <li>’s nicely expanding we need to make sure the last three are right-aligned in their respected <li>

.equal a {
background: #fff;
height: 9em;
display:block;
margin:0 0 0 auto;/*right aligns a block element in the good browsers*/
width: 9em;
text-align:center;/*to override the text-align required for ie6 for the parent li*/
}
.equal .n1 a {margin:0;}

In the good browsers you can use a min-width to prevent the boxes dropping down onto multiple lines.

As with most layout techniques… IE 6 has to be coaxed into behaving how would like. The code required to do this would normally be put in a stylesheet of it’s own using conditional comments but for the purposes of simplicity i’ve used a couple of hacks to keep everything in one file.

view demo

Admittedly, it’s pretty inflexible in that there’s no control over corner radius (2 pixels) but I though it was worth posting as there may be instances where it comes in useful. I’ll try and write up the method when I get time but for now you can just view the source.

returnr.com - find new music

The trick with this one is in the negative margins on the side columns.

Have a look

Here’s the example: centred css layout

This example is elastic so it scales to the font size. For simplicity, I’ve not added any hacks for Ie box model issues.

The key code

html,body {
min-height: 100%; /*this makes sure that the page canvas fills the browser*/
background: #efefef;
}
div#popmsg {
position: absolute; /*sets the positioning type*/
width: 18em; /*width in ems - keeps things elastic*/
height: 6em; /* same for the height */
left: 50%; top: 50%; /* this line and the next line sets the top left corner of the box to the exact centre of the page */
margin-top: -4em; /*then use negative margins top and left to offset the box by half it’s width*/
margin-left: -10em;
border: 1px solid #999999;
background: #FFFFFF;
padding: 1em;
}


View Example

1. Set the min-height for the html tag to ensure it always fills the browser window.html {
height: 100%;/*makes the html the full window height*/
}
2. Set the minimum height for the body tag to %100 and positioning value of ‘relative’ this will ensure that the footer, which is a child of the body, will use it as the reference area for absolute positioning. warning IE6 hack!
   
body {
min-height: 100%;/*sets the body to the window height*/
_height:100%;/*ie 6 hack - better in a specific stylesheet*/
position: relative;/*tells the footer to use the body the reference when setting position*/
}
3. Position to footer at the bottom of the body div#footer {
position: absolute;
height: 150px;
bottom: 0;
width: 100%;
left: 0;}

4. Finally, use whatever element proceeds the footer to create a space for the footer on top of which will never contain content.
div#primary {
padding-bottom: 200px;/*creates space at the bottom of the main content the same height as the footer to prevent anything from disappearing behind it*/
}


Tested in windows:

• firefox
• ie 6
• ie 7
• opera
• Safari

(any results from Mac users greatly received)

edit 02/02/08
alternate solution at dave-woods.co.uk

As I’ve been unable to find a pure css I’ve resorted to Dom-Scripting for the answer.

To solve the the problem I’ve created a script  which will allow you to use set widths for the select boxes. The code then  dynamically resizes them when the user interacts with the select box. Once a selection has been made or the element has lost focus the select box is resized back to it’s original size. In order for the code to work there’s a few tricks that are going on with the positioning model to prevent the resizing from affecting other elements but hopefully these won’t be apparent.

This solution isn’t ideal but with few alternatives it could be the answer.

*note
It’s worth mentioning that I’ve seen other scripts which do practically the same thing,  although all the one’s I’ve seen use one Framework or another. My solution is bare-bones, self contained, and unobtrusive. hope its useful.

View the example

Update
It’s worth pointing out that after testing this in the wild I’ve realised the css usually needs quiet a bit of attention to get it working as intended. At some point I hope to get this working straight out of the box, though my preference would be that poepl stop using ie 6 all together.

What is it?

A simple unobstrusive script performs a number of tests on the users browser then adds classes to the html tag of the document accordingly.

What can you do with it?

Create style rules which only apply under certain conditions such as:

• browser type
• window size
• operating system
• depending whether flash is enabled
• if the page has scrollbars.

Example uses

• Tweak layouts for different browsers.
• Simplify hiding of static content when using flash replacement
• customise pages for different operating systems including iphone specific styling
• adjust layout depending on available space (eg use larger background images for larger screens)

How to use it

Simply link you html file to the js file, and you have the following css classes at your disposal to customise for specific scenarios. It’s recommended that this script should be used for progressive enhancement.

Details

browser classes

• .Dom (browser understands Dom scripting)
• .isIe / .isIe7 (is Internet Explorer, is Internet explorer 7)
• .isMoz (is Firefox, Mozilla etc)
• .isOp (it’s an Opera browser)
• .isSaf (…you guessed it, is Safari)

screen size

• base browser width (.w640, .w800, .w1024, .w1280)
• ‘greater than’ specific screen size for broader rules (.gtw640, .gtw800, .gtw1024, .gtw1280)

operating system

• .isWin
• .isMac
• .isUnix
• .isLin
• .isIphone

other variables

• .hasFlash - browser has flash enabled
• .hasScroll - the page is taller than the browser and consequently has scrollbars
• .hasImg - browser supports images (good for safer image replacement)

example

Only one very basic example at the moment… but you get the idea. view example

download

Download specss.js (right click - save as)

The current version is untested in all scenarios so any bugs… let me know.

update - April 2008

The previous version had some problems with screen ‘flicker’ as the script ran after the page had loaded. To avoid this problem, the html is hidden until after the script has run. This is done with simple ‘visibility:hidden’ declaration (reset by speccs.js one the script has loaded) in the css and noscript override so it doesn’t recreate any issues for non javascript enabled visitors.