Posts filed under ‘Columnar Layouts’
Two-Column Web Page Layout with Table & Div Tags
Div tags are structural elements that let you create divisions within a page to organize the information into combinations of adjacent, hierarchical, and/or overlapping sections. CSS styles are used with Div tags to set the individual dimensions, backgrounds, position of text, and many other aspects of the division appearance to achieve a visually appealing layout of the information. Div tags with CSS styling is known as a pure CSS layout. The alternative is tables with CSS styling to lay out a web page. However, tables are really intended for presenting data, and not for structuring a page.
One thing I will say about a pure CSS layout versus tables with CSS is that the table approach will look pretty much the same on all browsers and will pass 508, HTML, and XHTML checks just fine. Pure CSS can require some twiddling because of some differences in how browsers interpret CSS sizing settings. Rather than pure CSS or tables with CSS, some designers combine the approaches by using tables to define the overall primary structure of the page and Div elements with varying styles to define the inner structure.
This blog describes a two-column outer table with two divisions (rows) in the left column and four divisions (rows) in the right with a variable width layout. Some designers like to use background images to fix the width of the divisions within the table, but with that approach you have to be sure the content remains within the dimensions of its division and will not ever grow to overflow it.
A two-column and multi-row layout would be complicated using strictly tables because the two sets of rows in each column do not exactly line up. You would need to arrange and nest tables to approximate the same look and to get the vertical line separating the right and left columns. You could also do this with pure CSS by using outer Div tags to define the left and right columns, but the table approach structures the columns evenly and consistently across browsers and resizes much better to accommodate screen sizes from very small to very large.
View the example, which is also shown here as a partial snapshot minus the bottom (fourth) row in the right colum. The HTML source code to achieve this look follows the Brief Description just below the snapshot.
Brief Description
Two-column table: The outer table is styled with a solid 2 pixel border around the outside. It has a left column and a right column that have a combined width of 100%. You can use a fixed width, of course, and a lot of people do that for a navigation column. The fixed width can be specified with a number in pixels, ems, or any other unit recognized by CSS.
Vertical column divider: To get the vertical line between the columns, you can either set the right side of the left column or the left side of the right column to a 2 pixel border. This example sets the right side of the left column.
Column rows: The rows within the left and right columns use Div elements with background colors and 6 pixel padding. Background images can also be used, and some designers use them with the div elements set to the height and width of the image to better control the layout. A controlled layout with a fixed height and width requires the text be an appropriate length so it does not overflow the area where it belongs.
You might want to copy the code into a file and play with the style settings to a better idea of how all the settings work together.
<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; }
table {border-width: 2px 2px 2px 2px; border-style:solid; }
td {padding: 8px; }
*.leftcolumn { width: 35%; vertical-align:top; }
*.rightcolumn { width: 65%; vertical-align:top;
border-width: 0 0 0 2px; border-style:solid; }
*.title{ font-size:12pt; color:#000099; text-align:center;
padding-bottom:6px; font-weight:bold; }
*.lefttop{ background-color:#cfcfcf; padding:6px; }
*.leftbottom{ background-color:#0099cc; padding:6px; color:#ffffff; }
*.righttop{ background-color:#9999ff; padding:6px; color:#ffffff; }
*.rightmiddle{ background-color:#6699ff; padding:6px; color:#ffffff; }
*.rightbottom{ background-color:#3333ff; padding:6px; color:#ffffff; }
*.footer{ padding-top:4%; text-align:center; }
</style>
</head> <body> <table><tr><td class="leftcolumn">
<div class="title">
Creating a Threaded Slide Show Applet
</div> <div class="lefttop">
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="leftbottom">
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> </td>
<td class="rightcolumn"> <div class="righttop">
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="rightmiddle">
All single or multithreaded programs execute in their own thread created and started by the underlying Java VM. 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 class="rightbottom">
Normally, you do not have to concern yourself with threads created by the Java VM to manage your program execution. As a developer, your primary concern is to determine whether your program works best single threaded or multithreaded, and then design and implement it accordingly. In making your decision, you should take into account that spawning additional threads carries overhead by consuming extra memory and processor resources. But sometimes a multithreaded approach is the best way to go so the user does not have to wait too long for a task to complete before starting another, or as in the case of the slide show applet, for the program to work at all.
</div> <div class="footer">
Read the full Threaded Slide Show article . . .
</div>
</td></tr></table>
</body> </html>
Web Design & Development Tips 