A note about this post: As this article is evolving and I’ll be patching it from time to time and in order to reduce clutter, I will not denote changes with the usual [updated] tag.
Layout vs Microlayout
For the remainder of this post, I’ll distinguish between layouts and microlayouts. While a layout is applied to the page as a whole, a microlayout affects a block of elements such as some text and images in a container or nested containers. This is important for modularization which allows us to create and style resuable HTML components (think of taglibraries or tagfiles in JSP).
Tables: when to use
To make it short: tables have severe drawbacks even though at first they might seem the most obvious solution to get a layout right. The pros: the content scales to the extent of the screen, there are no line breaks with narrow screens, cells are placed exactly where you want them and colspan/rowpan allow for some pretty neat layout effects. Which is also the downside of designing with tables: they don’t fit equally well on big and small screens and do not allow to put more content in a line for bigger screens than originally designed for. When the screen is smaller than you designed for, scrollbars appear and when it is larger, content seems lost with wide gaps spread in between. Also the available width is equally/proportionally distributed across columns, which is something you probably do not want – one usually would like the extra space to go to some of the columns while others stay at a fixed width.
Use tables when:
– all columns of a layout stay on the same line regardless of page width
– rowpans or colspans are necessary
– the data displayed is tabular by nature
Don’t use tables when:
– depending on the screen width more or less content should fit on a line
– line breaking should occur and content should overflow to the next line
– a fluid layout is required
– Internet Explorer (IE forthon) renders rows containing cells with rowspan or colspan always at an automatically calculated height, overriding any manual settings
Intelligent layouts: layouts and microlayouts with DIVs
When handled properly, nested DIVs exhibit marvelous properties: they align nicely, content scales to small and big screens and your design makes best use of screen real estate.
Elements in a fixed container
A simple form of layouting is just inlining elements in a container. The container has a width equal to half the page width, thus you can observe how the (micro)layouting behaves when resizing the browser window.
Container size determined by its content
This case is similar to the previous one, only that now we’ll remove the fixed size definition from the Container.
And this is the HTML:
Aligning multiple Containers
Now lets try this with nested containers: I want a container which contains another container of a fixed size and gives the rest to a wildcard container:
Sections: Forcing linebreaks
A break in the layout is best achieved with the clear property:
And here is the corresponding HTML:
And if we’d like the right container to get all available width this is the way to do it:
<div style=”border: 2px solid black; overflow: hidden; width: 40%;“>
<div style=”background-color: skyblue; border: 2px solid black; clear: both; overflow: hidden;”>