Site Development
Downloads
Help!!
Home
Adding ContentWe'll begin by simply adding some content to our boxes as in example. I copied and pasted some text from the Quake FAQ. You may want to add some "stub" data like this if you are handcoding data. The reason is to set the individual box's padding and content alignment before you start adding complex content (like nested <div>s). This makes it easy to determine if a spacing problem is caused by your padding or your content. After copying the content, I noticed that it appeared directly beside the borders giving the box a crowded look. I added 5px of padding all around each box using: padding: 5px; The above was added to the styling of each box. You can use whatever value you need and can add customized, individual padding to each side using:
padding-left: value; Values can be in pixels (px) or a percentage (%). The percentage will refer to a percentage of the <div> and not the whole page. Adjusting Box HeightsNow that you've added some content, scroll down and look at your boxes. Egads! The bottoms won't line up. The boxes have been stretched downward by the content. You'll notice that in the example, I've removed all of the old "height: 400px;" declarations from the styling. They wouldn't matter anyway. Content will over-ride the "height:" if there's more content than the "height:" can contain. In this case, each box has the same content. The narrower boxes had to expand further down than the central box. In practice, they'll vary a lot due to varying content. This is something most people want to fix. They want the boxes to stretch to the bottom of the page evenly. The best way to do this is to set a "height:" in pixels that will cover even the longest box, and put this value in the styling of all of the boxes. That will make them all of the same height. The height selected should be the height of the longest box and is generally in the thousands of pixels. By viewing my page in a pixel grid (a feature of my code editor) I see that the two outside boxes both stretch to nearly 4300 pixels down. I decided to round this to 4500 pixels and added that to my styling producing this page. You may ask why you just couldn't use "height: 100%". This doesn't work because the "height:" refers to the <div>, not to the overall page. To automatically size the boxes, you'll have to use JavaScript or another programming/scripting language. This will detect the longest box and stretch the others to the longest box's height. For now, using only CSS, you should make sure you leave plenty of height for your longest, most content filled boxes, and some "padding-bottom:". Be generous here and expect to have to play with the "height:" to get it right. If you are using an external stylesheet for a whole site, you'll have to keep in mind the largest content on the whole site. If you just have one or two pages with an extraordinary large amount of content, you can over-ride the external stylesheet's "height:"s by coding "height:"s as needed in the <head> of those pages. The rest of the external stylesheet (horizontal layout, colors, etc.) will still apply. Keep in mind that you won't have to adjust "height:" at all if your boxes don't have borders or backgrounds - they're just used for positioning. There would be no visible indication that the boxes were of different heights. Using A "Footer" <div>After you set your heights, you're probably wondering how to get the boxes from going down to the absolute bottom of the page. No matter what height they have, they'll define the bottom of the page and the bottom borders will rest right on the bottom of the page. There are a couple of ways to deal with this. If you are not using borders or a background in the box, you can just add "padding-bottom:" to the bottom of each box. This pulls the content from the bottom of the page and there's no visible indication of the bottom of the box. In cases where the borders or background are visible and you want to push all of your boxes up a few pixels, I suggest using a "footer" <div>. This is just another box placed below the others that has a "height:" that makes the padding. this box won't have any borders, background, or content. Well, some people use these to put in copyright content and such. I added a footer <div> to this page. Scroll to the bottom and you'll see there's some whitespace between the bottom of the boxes and the bottom of the page. This space was made with a footer <div>. Start making a footer <div> by adding a simple <div> to the rest in your page's <body>. Here's the one I coded in the example: <div id="footer"></div> I added this blank <div> below the code for the others, but you can really place this code anywhere in the <body> you'd like. This is because we're using "position: absolute" and the order in which the boxes are coded is irrelavant. I gave this box an ID of "footer". You can use whatever ID name you want. Then I styled this "footer" with two important things in mind. It's "top:" position to place it below the other boxes, and it's "height:" which becomes the amount of whitespace at the bottom of the page.
#footer { Notice that I placed the box at the bottom of the other boxes using "top: 4500px;". Remember that's the height I decided on for the content boxes. I also used 50px of "height:" to add 50 pixels of whitespace at the bottom of the page. You can add more or less as needed. I had the box run 100% across the page ("width:"). The IE glitch won't effect this box because it has no visible elements. Now were done! We've laid out a page in CSS-P that will look proportionally the same at all screen resolutions. It looks much like a <table> using percentages, but has many advantages over the <table>: 1) It requires a lot less code than <table> tags. 2) The styling can be put on a single external stylesheet and applied to a whole site. This makes for easier editing, too. 3) When you learn JavaScript, you'll find it much, much easier to code dynamic effects in each box. Summary & Exercises
Now all that's left is to copy and paste your style rules to an external stylesheet and link it to your pages! |
It's a good idea to use some "stub" content instead of your regular content to set your initial padding.
Draw out your page's layout on paper. Calculate the boxes' "width:", "left:" and the distribution of whitespace.
To Next Advanced CSS Lesson
Back To Advanced CSS Index