Urban Giraffe

Flexible wrapping

Currently we have a fluid design, with the contents and sidebar bundled together in a wrapper. This wrapper gives us a lot of flexibility and we can now change from a fluid layout to a fixed layout by modifying one style.

Option 1 - Fixed layout
This is the simplest layout and the one used by most blogs. A fixed layout has many advantages:

• Most like a newspaper or book
• Reasonably confident that the layout will look the same on any screen
• No nasty browser issues

Here is the style:

#wrapper
{
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

A width of 700 pixels was chosen because the accepted minimum screen resolution is 800x600. Most fixed themes cater for this size screen, and we have 100 pixels of extra space.

Let’s look at the margin:

margin: 0 auto;

A two value margin definition means the first value is for the top and bottom (0 in this case) and the second is the left and right margin – here we have ‘auto’, which tells the browser to choose an automatic value. This has the effect of placing the element in the centre of the screen.

Setting overflow here uses an obscure CSS rule to force the height of the wrapper container to the height of the tallest element. This way the footer will always be underneath the tallest element, regardless of whether it is the sidebar or the content. A value of hidden ensures we don't run into a bug on the Mac Internet Explorer.

A look at the theme in both Firefox and Internet Explorer shows we have a good match.

Firefox

Internet Explorer

The theme fits into an 800x600 screen, and is not affected by different resolutions. It is simple to change the ratio of content to sidebar by changing the percentages in the relevant styles. Our first design is finalised.

Option 2 – Adding some fluidity
The majority of blogs use a fixed layout so it would be nice to do something a little different. We want the content to be fairly constrained, but that doesn’t mean it has to be completely fixed – we can make it a little fluid. Fortunately our theme and the new wrapper element provide us the means to do this with little effort.

Change the wrapper style to:

#wrapper
{
  width: 85%;
  margin: 0 auto;
}

Now our content and sidebar take up 85% of the available width. If the user has an 800x600 pixel screen then it fits nicely, but it will expand for a larger screen. The value 85% was chosen because it looked nice. Sometimes the simplest reasons are best!

One thing you should do when creating a theme is to check how it looks on different browsers, and at different sizes. This last point is important as certain browsers are notorious for doing strange things, and especially when viewed under 800 pixels. Let’s look at our new fluid theme when viewed at 400 pixels:

Firefox

Internet Explorer

Firefox has behaved very well, but Internet Explorer has done something odd – the sidebar element has dropped underneath the content.

Although not ideal, this is not unacceptable behaviour. Internet Explorer has discreetly pushed the sidebar out of the way. A lot of websites exhibit this behaviour and you may accept this as a compromise to having fluidity.

Is there anything that can be done about it? Well, yes. Kind of.

Option 3 – Fluidity without the breakdown
Here we make use of some pretty complicated CSS code that enables us to stop Internet Explorer pushing the sidebar away, and also causes Firefox to react better at smaller widths. To do this we employ the CSS concept of minimum width. As you would expect this allows us to define a minimum width for an element. When the browser goes below this width it stops sizing the element and puts scrollbars on the window. This is completely acceptable.

There is one catch to this wonderful concept: Internet Explorer does not support minimum widths. Fortunately we can work around this by using dynamic properties. This is a way to embed JavaScript within the CSS. Not particularly pleasant, and it requires JavaScript to be enabled.

Our aim is to introduce some styles such that:

• Minimum width supporting browsers have a fluid layout and a fixed minimum
• Internet Explorer has a fluid layout and fixed minimum when JavaScript is enabled
• Internet Explorer has a fixed layout when JavaScript is not enabled

We can achieve all of this neatly by changing the wrapper style:

#wrapper
{
  margin: 0 auto;
  width: 700px;
  width: expression(document.body.clientWidth < 605 ? "600px" : "85%" );
}
 
div>#wrapper
{
  margin: 0 auto;
  min-width: 400px;
  width: 85%;
}

Let’s break this down. We already know what the auto margin does. After this we have the width defined twice:

width: 700px;
width: expression(document.body.clientWidth < 605 ? "600px" : "85%" );

Remember that CSS allows us to define properties many times, with the most relevant taking precedence. The first width provides a fixed size for all browsers; this is the default catch-all case.

Next is the IE-only dynamic expression. Other browsers will ignore this line, but a JavaScript-enabled Internet Explorer will pay attention and override the previous width. The expression simply states that if the document width goes below 605 pixels then change it to 600 pixels (our minimum width), otherwise set it to 85% (our fluidity). We need to test for 605 pixels instead of 600 to prevent JavaScript getting into a loop and crashing the browser. Users do not like that.

Finally we have defined a new style that uses CSS child selectors. A child selector gives us the ability to define a style for an element within a context. That is, the style only applies to the element when it is part of a certain hierarchy. In the above style we have:

div>#wrapper

This translates into:

• This style applies for #wrapper but only when it is a child (>) of a div

Although it hasn’t been pointed out yet, header.php defines the div ‘page’ which contains everything, including our ‘wrapper’ element – hence wrapper is a child of a div.

Why make a new style using a child selector? This is the clever bit. Internet Explorer does not support child selectors. When it sees the extra style it will completely ignore it. Other browsers that do support it, such as Firefox, will see the extra style and use it. This means we can write the fluid style properly for other browsers, while leaving Internet Explorer unaffected.

To summarise the trickery:

• New browsers will display a nice fluid design with a minimum width preventing screen mangling
• Internet Explorer with JavaScript will have a fluid design, with a partially effective minimum width (it flickers a little)
• Internet Explorer with no JavaScript will have a fixed design

This is all transparent to the user.

Share This