Posts filed under ‘Columnar Layouts’
Three-Column Web Page Layout with Div Tags
In the early web days, table tags were used to organize the content on a web page. They could be easily nested and formatted and all the browsers handled them consistently. But there were problems. The resulting HTML got pretty complicated and using tables this way is not the best thing for accessibility.
That is, people with impaired vision reading your page with an HTML reader might find the content inaccessible. They could run into difficulties because their reader cannot correctly parse the structure of the page when presentation markup (a table) is used where structural markup (the div tag) should have been used instead. While I think modern page readers handle these situations pretty well, using div tags and styles have the added benefit of not only simplifying your source file, but of giving you more control over the look and feel.
I don’t know about you, but it has taken me a lot of trial-and-error to get the hang of using div tags for a relatively complex column and row layout that resizes well in the major browsers. And I’m still working on it. So, here are some tricks I’ve learned that involve using the following style tags to lay out an article on a page of 4 rows with the second row consisting of three columns: float:left, clear:both, width, min-width.Below is a snapshot of the article page, or better yet, you can View the example. The first row is the article title, the second row has three columns of article text, the third row is article text, and the fourth row (not shown in the snapshot) links to the full article. The full HTML with embedded CSS style code appears below after a description of the HTML and style tags.
The width style sets the width as a percentage of the page. For three columns you want the total widths to add up to about 3% less than 100% to accommodate for default margin values. Alternately, you can set the margin values to a negative value such as -1 or -2 and then adding padding so the text is positioned nicely within its column. If the total widths are too wide, the right-most column will float to the next line. The min-width style sets a minimum width for each column. Without this setting, some browsers will render the columns on top of each other instead of from left to right.
Floats are used here to place the column text to the left (float:left) or right (float:right) of its column area. Changing these setting to float:right will place the text to the right of the column. Note this is not the same as left or right aligning the text. To align text, use the text-align style.
The clear:both divider is very important for laying out a columns and rows format and keeping the text from floating where you do not want it to go. Different browsers will handle the flowing a little differently, but if you do not include the divider, the bottom row will flow into the columns above as you resize the browser window. Note the divider goes after all the columns in a given row. For a two-column layout, the divider goes after the second column, for three columns, the divider goes after the third column, and so on.
One thing that’s different about doing it this way from using tables, is that when you resize the browser down to a very small width, the right-most column moves below the left and middle column. With a table layout, the right column does not shift down like this. I have to say I like the behavior of the table layout approach a little better, but after some time and practice I am starting to really like the design freedom that using div tags with CSS gives me.
If you want to learn more, a good way to start is to copy the HTML below and play with the style settings. Then, resize your browser window and see how the changed settings behave.
I welcome your comments and input.
<html>
<head>
<style type="text/css">
body{ display:block; width:98%; background-color:#fefefe;
font-size:10pt; font-family:arial,verdana,helvetica,sans-serif;
padding: 0.25em; }
*.heading{ font-size:20pt; color:#00008b; }
*.leftcolumn {width:32%; min-width:150px; float:left;
padding-top: 5px; }
*.middlecolumn { width:33%; min-width:150px; float:left;
padding:5px; }
*.rightcolumn { width:32%; min-width:150px; float:left;
padding-top:5px; }
*.divider { clear:both; }
*.row { width:100%; padding-top:5px; padding-bottom:5px; }
</style>
</head>
<body>
<div class="row">
<span class="heading">
Creating a Threaded Slide Show Applet
</span> </div>
<div class="leftcolumn">
A thread is a path of execution through a program. Single threaded programs have one path of execution, and multithreaded programs have two or more paths of execution. Single threaded programs can perform only one task at a time, and have to finish each task in sequence before they can start another. For most programs, one thread of execution is all you need, but sometimes it makes sense to use multiple threads in a program to accomplish multiple simultaneous tasks.
</div> <div class="middlecolumn">
For example, a multithreaded math program can let the user set parameters for a new calculation while a previous calculation computes. Or a multithreaded word processor can let the user open a new document while a large file saves or spools to the printer. And sometimes, as you will see in this article, a multithreaded approach is necessary when you need a method to execute in a continuous loop in one thread and another thread to do something else like paint the display between loop iterations.
</div> <div class="rightcolumn">
This article describes multithreaded programming by presenting an example slide show applet. The images for the slide show applet are thumbnails of paintings by Claude Monet downloaded from a public web site. If Claude Monet were alive today, the thumbnails and slide show applet might very well be available from his own web site so prospective buyers can view his latest works and make electronic purchases.
</div>
<div class="divider"></div>
<div class="row">
All single or multithreaded programs execute in their own thread created and started by the underlying Java VM1. The Java VM also creates and starts other threads to help manage single or multithreaded program execution. For example, the Java VM starts the Finalizer thread to execute an object’s finalize method before the object is garbage collected, and starts the AWT-EventQueue-0 thread to call an object’s event handling methods such as actionPerformed and windowClosing. Because the Java VM spawns threads to handle the execution of a program, you might say that the Java VM itself is a multithreaded program.
</div>
<div>
<a href="http://www.pawlan.com/monica/articles/slideshowapplet" target="_blank">more</a> . . . </div>
</body> </html>
Web Design & Development Tips 