Site Development
Downloads
Help!!
Home
The CSS-P Layout IdeaFor years tabular layout has dominated the Web. It still does. The reason for this is that tables are consistently rendered by all browsers and that tables can be made to either an absolute size, or a size relative to the viewer's monitor resolution. These are huge advantages. Using CSS-P for laying out an entire page is catching on, however. CSS-P offers more precision and flexibility in positioning elements. The problem is that Netscape and IE render and position <div> boxes very differently. This becomes painfully apparent when trying to make columns on a page with CSS-P. In the next several tutorials, we'll be using the <div> boxes we're already familiar with and using them to make columns and lay out a page in both browsers. Mind you, many of the problems you come across laying out a page with CSS-P will be cross-browser issues that can be solved by switching to tabular formatting. A Default <div> Box PageWe'll start of with a simple page with one <div> box and some content, like this one. Pretty simple, it's just a box and some content. Here's the code for the page:
<html> You should recognize everything above. The page's body has a single paragraph of content and a <div> box with four dead links in it. The content paragraph is styled with the "p" styling and the <div> is given an ID and styled with the "#box1" styling. At this point we've got our first sample. Now we can move the content text up beside the <div> so we have a column. Position: Absolute;To get the content beside the <div> instead of below it, we need to add "position: absolute;" to "#box1's" styling. By default, "position: relative;" is applied to <div>s. This means that they blend in with the content as coded. Using "position: absolute;" removes "#box1" from the normal flow of rendering the code and places it in an absolute position regardless of other content. In addition to "position: absolute;", we need to add "top" and "left" CSS properties to "#box1" to position our box. Here's the code I used:
#box 1{ These few additions to "#box1's" style gives us this page. The first thing you'll notice is the irritating overlapping of the box over the text. We'll deal with this next. Using Content MarginsThe final step to making a CSS-P left column is to add to the content's margin so the box won't overlap it. Notice that the original left margin for "p" (the paragraph) is "margin-left: 20px". It still is, but the 100px wide box overlaps some of the text. To calculate the margin needed just add the width of the box to the normal margin you'd like -- 120px in this case. Let's change this in our code:
p { The large "margin-left" property clears the content away from the left column occupied by the <div> box. If more content were added the box, it would grow downward in the margin provided for it. You'll probably have to play around with this margin to get the amount of space you'd like. The same rules apply to using percentage values for margins, but it takes more trial and error to get the percentages right. I'd always recommend an absolute width for the box. That means a width value of a certain number of pixels. Here's the final page with a left CSS-P column. Review & Exercises
Practice making the left column page by remaking the page used in the last example. Add more content to the <div> (between the <div> tags) to watch how the box grows downward. |
CSS-P can be used to block off your page in boxes and to make columns similar to tabular formatting. There are differences in how different browsers render boxes and their positions, so CSS-P may not be appropriate for every site's layout.
To Next Advanced CSS Lesson
Back To Advanced CSS Index