I’ve just spent a frustrating few weeks trying to create a 3-column website for a client where the middle column does one very simple thing – to expand dynamically to fit the content.

Basically, it can’t.

Which just seems crazy to me. Where is the benefit of having tables, images, any fixed size element overlapping the adjacent area when its enclosing DIV becomes too small? Surely this is something that should have been considered when the spec was being drafted? If you look at my site and make the window really small then the “What’s new” image eventually overlaps (or is overlapped by) the right hand side.

I would regard myself as a fully paid-up member of the pro-CSS camp, but if it can’t do something that simple and common then it’s of limited value and other methods have to be entertained. In this case I’ve had to resort to a table to create the columns, which does exactly what I want but makes me weep to think that I have to add this to my beautiful code. This table makes the code more complicated and reduces the accessibility of the site.

Technorati Tags: 3col, code, columns, css, design, tables, webdesign, website

In the never-ending effort to streamline the production of the site (or just to amuse myself), I’ve added a :first-child pseudo-class to the CSS.

This means that the first <p> in every entry is automatically given a bold style. The code is:

.entry>p:first-child {

font-weight: bold;

}

The text for each post is contained within a <div> with a class of ‘entry’ and is made up of a series of <p>s (plus some <div>s at the end which we can ignore in this case). Previously I’ve been adding <strong> tags to the first <p> as a general stylistic thing. :first-child allows me to not have to add these tags and will style the entry appropriately when it hits the site.

Pros: less code. Cons: no preview until it’s live (fix: create a new stylesheet for ecto).

Part of the CCS2 spec, doesn’t work in IE

Technorati Tags: css, design, ecto, webdesign, website, xhtml

Well that kind of said it all, really.

I decided to make the move over to strict xhtml, from transitional. In the process I removed the del.icio.us bookmark link that I’d added a while back and was causing the page to fail the validation. I probably could have fixed it, but I wasn’t in the mood, and it was pretty useless for my site anyway. If you used del.icio.us you’d more than likely have the bookmark to hand anyway.

Technorati Tags: code, valid, website, xhtml