Advanced CSS Layouts: Step by Step / Page 3 | WebReference

Advanced CSS Layouts: Step by Step / Page 3


[prev]

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 "advBar" clear property to right. Finally we set "topBar" 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

In this step we are going to change the headers 'This is the main.' and 'This is the main2.' to 'WebReference.com: Dev the Web™' and 'internet.com' respectivly, as this is the real content in the WebReference site. We are doing this because we are going to put a title to the "Tip of the day" box, and this title goes in the same dark colored header bar that holds the 'WebReference: Dev the Web™' text. To accomplish this we are going to use a div element identified by "tipTit," this element should be the first child of "main" and have its float property 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 text-align to right and the position property to relative, this solves a rendering problem in IE that we discussed before. The line-height property 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.]

Future Improvements

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 div widths)
Nest your divs
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 "nowrap" for divs
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 div and table widths
Setting width:100% in a div can 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 div width, so you can use //width:100% in a surrounding div and width:inherit in 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 div around the enclosing div set to clear to avoid this in NS6 or set the form line height to less than the div's height and clear the div below. 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-height is not supported, in v5/6 browsers. IE 5.5 doesn't support min-width, max-width, min-height, max-height.
In forms, set margin:0 for Opera and Netscape
Especially for floats, to minimize margins like IE.
If you want to use bottom or right properties 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 right property, if you want to use the bottom property 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.

Further Reading

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.

is the President of Website Optimization, LLC, a Web performance and search engine marketing firm based in Ann Arbor, Michigan. King is the author of two books on Web site optimization, Website Optimization: Speed, Search Engine & Conversion Rates Secrets from O'Reilly in 2008, and Speed Up Your Site from New Riders in 2003. He holds BSME and MSME degrees from the University of Michigan engineering college. Before starting his own company, King worked for Jupitermedia, as managing editor of WebReference.com and JavaScript.com.

Acknowledgements

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


[prev]