Actually, that is quite unfair to say because CSS itself (language/syntax) is okay on its own. It is the standards body and the set of standards they decided upon that cause nightmares for millions of developers and designers each day. This should be no secret for anyone who has attempted to get a site to work 100% in each browser, that is without a single pixel off. While it certainly is possible, the hacks often required to do so have been passed down through the generations of the language.

height: 100% – in your dreams
You would think that making a div have a height of 100% would mean that it would fill whatever space it was within. Not true! It works so long as the parent div has an explicit height. Note that it doesn’t work on this page. Note that while the right div has a height of 100%, it doesn’t adjust to fill the space created by the left div. Note that if you do not have the Clear div in there, you won’t even see the wrapper’s background. In otherwords, it doesn’t grow with its own content. Good job on those standards!

To fix this we have to define some explicit heights. By giving the Wrapper div a height of 800px you will notice that not only does the height setting work all of a sudden, so does the background! View the new code here.

While this is nice and all, it sucks for anything that has fluid height. The real fix for this is to move the right column’s bottom div outside of the right column and create two more columns afterwards. But now that div is outside the height of the left column which could make for an awkward gap, especially if you have a background image that provides a border. Enter the hacks: by adding a negative margin we can move the div back up into the column above it. See the final page. Congratulations, we have now entered the realm of CSS hacks and from here on out there is no turning back.

Margins and Padding In Nested Elements
Why is it that margins and padding in nested elements always seem to affect their parent elements? Furthermore, why can’t I define an explicit width and then give it padding? Why must the padding always be changed with the width? This makes for unreadable CSS that forces you to do addition and subtraction on the fly to get the true width of the element.

This one is simple: attaching the site’s content to the top of the page. This is easy enough as demonstrated here. No real trickery is required; just set the body and html tags to have a padding and margin of zero on all sides. If you are working in ASP.NET you may need to set them for the form as well. Never-the-less the two CSS properties do as we expect them to, at least until we add some real content. Just by adding a simple h1 and p tag we have already corrupted the parent element’s placement on the page.

Why does adding elements with a top margin to a nested element change the positioning of the parent element itself? In some cases (and probably here too, I don’t have WebDev bar installed here) the entire body is moved down because of this top margin issue. Regardless of that, a child’s positioning should never affect the position of the parent except for in specific/explicit cases. An element’s margins and padding should always be relative to the container it sits in and sibling elements. But instead we have to deal with setting top margins to zero now because of the CSS standards.

XAML Rocks
Which brings me to my point – the CSS language isn’t broken, the standards we follow are. If you look at Microsoft’s implementation of similar features in XAML, you will see that the standards they use actually make sense for all of those involved. Let’s look at the first problem I mentioned: advanced column layouts with a bottom positioned element in the right column. In XAML we can use a Grid to create the two columns, but many will cry out that is too easy and "tables" shouldn’t be used for layout purposes. Instead we can use the Grid as we would use a Div in HTML. We use the HorizontalAlignment attribute to tell each Grid to "float" which creates the columns. Much to the web developer’s surprise, XAML does exactly what you tell it to do!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<Window x:Class="BottomPositionedElement.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="600">
    <Grid Background="#2D2D2D">
        <Grid Background="#DFDFDF" Width="340" Margin="10" HorizontalAlignment="Left">
            <TextBlock>
                Some content would go here and stuff.
            </TextBlock>
        </Grid>
        <Grid Background="#8F8F8F" Width="200" Margin="10" HorizontalAlignment="Right">
            <Grid Background="YellowGreen" VerticalAlignment="Bottom" Margin="10">
                <TextBlock>Hello, world! I am a bottom positioned "div"</TextBlock>
            </Grid>
        </Grid>
    </Grid>
</Window>

My point is to raise the obvious question: If Microsoft can implement its own set of XML tags and write a standard for them that makes sense and works, why can’t the HTML/CSS standards bodies? To blame this on the browser manufacturers at this point is just silliness since IE8, Chrome, and FireFox all have similar isses. That is to say that they follow the standards but what you expect is not what you get.