Advanced CSS Layouts: Step by Step [con't]
Float the Search Form
Now we are going to place the search form and text links into the top navigation bar. To insert the form we just give it a float right treatment and write the chunk of code as the first child of "
topBar." We have to declare a width for this element since we are floating it, 10.5 em is a good value and note that we are using em units to let the input elements grow according to the browser selected font size. We also set the text alignment to right, since the form is a little wider than the space used by the input elements. We aren't done yet, so try it to see what we're going
to solve next. Take a look.
We need to set the form's margins to zero to make the form's vertical size as small as possible. For Netscape we have to add a
line-height of .7em to make the search button height the same size as the other input element, this statement doesn't change anything for IE or Opera. The float overlaps part of the advertisement block. We can't allow this because we are going to have a text link just below the search form but inside the advertisement block, so we set "
clear property to right. Finally we set "
width to 100% to solve an IE bug that breaks the layout and declare that the input elements in the top bar have a font size of .8em, this way they will grow proportionately accordingly to the browser's font size. Take a look.
Add Some Text Links
Now let's put the text links in place. There are five text links separated by bullets and wrapped by a bold ("
b") element, so this
b element should be the second child of "
topBar". Now, there is a strange bug in Windows IE 5.0 that flushes these links to the right. To deal with this problem we can wrap the
b element with a
div element and set its text alignment property to
left or we can use the
display property from the
b element to convert it into a block element and then set the text alignment to left. We also set the font style and chose a good value for the line height so the text links are vertically centered. Take a look.
Add Real Content, and Float a Tip Title
divelement identified by "
tipTit," this element should be the first child of "
main" and have its
floatproperty set to
right, again we need to set its width to some value and give it some font style attributes to have it vertically centered. The width used is 7em (the same width of "
tipDay") and we also set
relative, this solves a rendering problem in IE that we discussed before. The
line-heightproperty should be set to the same value used in the header to give the vertical centering. Take a look.
That's it! We've successfully replicate WebReference.com's front page layout using CSS. Now let's add an ad and change the Tip of the Day title to the proper background color. Take a look. Note: The final version has not yet been tested in IE6. We'll address this browser in a future update.
[In the mean time, many readers have written to inform us that there are at least some problems with IE6 in this layout. The worst offender appears to be that the background color in the right column automatically realigns with the right edge of the window when you reduce the window size (which is correct) however the actual content of the right column remains right aligned with the edge of the banner ad (which is ugly). Thus, as you continue to reduce the size of the page, the content stops when it hits the width of the banner ad, but the background color continues to be moved to the left. Sigh....—ed.]
This tutorial should give you a better idea of how to create simple to complex multi-column layouts using just CSS. To further refine the design we could also add in the lighter colored news/highlight items in the left column, and beef up the padding so it matches (like tipDay, though we'd use a surrounding
div here, see workarounds below). For the two table-like left/right rows ([sitemap | experts .... search] and [WebReference: Dev the Web .... Tip of the Day]) we can explore using A List Apart's technique of float left/right 49% width around a spacer
div, although the form might pose a challenge. We'll need to test it for compatibility with our target browsers of course. We could further optimize our CSS, but the version now uses no tricky implied if/then parsing error tricks in the CSS as before so it could be used for a production site. Let us know what you think of these techniques, and feel free to try improving it yourself. Here's a summary of what we learned along the way.
Summary of CSS Workarounds
- Be fluid
- Use relative lengths where possible (em or % for fonts, em for
- Nest your
- This is a workaround to solve boxing model differences, so it's a powerful crossbrowser technique. Padding and borders and widths don't mix well in IE5. Make sure you separate your style settings of padding and borders from any width settings in
divs. IE5x for the PC's box implementation incorrectly puts the padding and border of a box within its stated width. The W3C says that padding and border are to be added to the width, and IE5 Mac and Gecko-based browsers correctly implement the box model. Instead, if you've got to set the width of a box, that also needs padding or borders, separate them into two divs, not one. The rule is: For the same block element you might set horizontal margins and width or horizontal margins, horizontal borders and horizontal padding. Avoid declaring width and padding or width and borders for the same block element. Use nesting to achieve the desired visual.
- Don't use "
- Netscape and Opera will overflow these at larger font sizes.
- IE 5.x has a CSS parsing error that can be used
- In IE5x comments are interpreted as code rather than ignored, so this can be utilized to do crude if/thens to workaround bugs in IE5x. IE 6 eliminates this error. We used this technique to set the right bar's width etc. before coming up with the above inherit workaround:
- Watch your
divand table widths
divcan cause it to not match the width of
divs set to
auto(the default) in IE and, in IE5.5 when using
table width="100%"IE assumes entire window width, not the
divwidth, so you can use
//width:100%in a surrounding
width:inheritin a table's style sheet.
IE doesn't inherit as it should, our guess is that it will inherit the value from the last ancestor that has a declared width value (absolute and relative values or 'inherited' keyword, IE doesn't support '
auto' keyword). The percentages are calculated based on the inherited value so the above rules for percentage values also applies.
- Floats can cause clearance problems
- Especially with forms. Solutions: use a
divaround the enclosing
divset to clear to avoid this in NS6 or set the form line height to less than the
div's height and clear the
divbelow. The technique used in the article from A List Apart is also an alternative solution.
- Do not use fixed heights
- Version 5/6 browsers do not support them. Also
min-heightis not supported, in v5/6 browsers. IE 5.5 doesn't support
- In forms, set
margin:0for Opera and Netscape
- Especially for floats, to minimize margins like IE.
- If you want to use
rightproperties you have to set either the width or height for the parent and it will work in IE.
- Opera conflicts more with the W3C's CSS specification, so you need to set the width for the child if you want to use the
rightproperty, if you want to use the
bottomproperty you have to set the height for both parent and child. This explains some positioning problems we had in the right bar for IE. This works if the parent doesn't have margins. Opera and IE 5.5 have systematic errors when margins are present on the parent.
- Cascading Style Sheets - From the W3C
- CSS Layout Resources - A list of other CSS and CSS layout resources and tutorials
- Evolution of a Home Page - Kwon Ekstrom's CSS Versions
- HTML with Style - Stephanos Piperoglou's HTML and CSS tutorials, includes CSS layout tutorials
- Practical CSS Layouts - A List Apart's real-world CSS tips including table-like forms, and left/right-aligned nav bars.
About the Authors
was born and raised in Mexico City. With a programming background, Rogelio started to code some simple programs in QBasic for physics and math-related problems. Then he started to learn some C, C++ and Delphi programming. He's self taught in HTML and has discovered the wonders of CSS from the W3C.
Thanks to for coming up with the original CSS layout, and helping out with this version. Thanks to Andy King for his help in refining our design and hammering all our iterations mercilessly on his Mac.
Original: Aug. 28, 2001