|
|
|
HTML Code TutorialTutor Ebook Download 3 Columns Without TablesIt is possible to construct multi column web pages without using tables. Pages developed in this manner will be easier for search engines to navigate. It is however, harder to construct pages using these methods that will appear the same in all browser types. One of the problems you will encounter is getting all columns to display at the same length. It is possible to do it, but the code is too advanced for most people at this stage of learning. You can use absolute height settings (Example: height: 500px), but you'll need to control the amount of content that you place in each column and be sure to test the pages in different browsers and at various monitor resolution settings.. This 2 column page demonstrates the use of absolute settings for column height. Here is the 3 column set up using the code shown below. (Right Click on Page to get the source) 3 Columns Repeat: You must be extra careful to test pages developed in this manner in as many different web browsers as possible and at various monitor resolutions. The CSS code for setting up the 3 column page is shown here. 3 divisions are defined using the class operative. div.left{ width :20%;float : left;}div.middle{ width :59.9%;float : left }div.right{ width :20%;float :left }
You must pay careful attention to the widths of the divisions. If you add padding or borders to horizontally adjacent divisions you must decrease the width of the divisions. When making these adjustments it is a good idea to set your monitor resolution to its lowest setting. The more padding you add to a division or the wider the border, the lower the width settings.
One solution is to abandon the use of relative (percentages) width settings and use absolute values. This of course does away with your liquid web page design. This is the HTML code for the page. Note the method of adding the class definitions. (Style code given above)
<div class="left"><br clear="all">
|
Contents IntroductionPage Structure Basic HTML PageDoctype The Body Tag The Header Tag The Division Tag Horizontal Rule Anchor Tag Anchor Tag - Intradocument Anchor Tag - Image Using Borders The ID Attribute Meta Tags Text Controls Style SheetsWorking With Fonts The Paragraph Tag Paragraphs-Images Using Lists The Pre Tag Line Break Tag Tables Basics of TablesColspan Forms Form BasicsCheck Boxes Text Boxes Selection Boxes Frames Basic FramesTarget and Scrolling Search Engines Miscellaneous Buttons with CSSUsing Color Using Images Using Templates Uploading HTML pages. |
|
Copy and paste the code into a new web page. Experiment with adding borders and cell padding. Add a couple of paragraphs of text to each division. Test in IE and Mozilla browsers. Experiment with different monitor resolutions. Repeat the exercise with absolute settings for width and height. |
 |
 |
Note: Monitor Resolution will affect the way your page will display. Test at different resolutions. If you are not careful and build your pages at an 1024X768 resolution or higher, someone surfing the web with a monitor resolution set to 800X600 might see your page as shown on the left.