Applying table-related display property values to web page elements causes the elements to mimic the display characteristics of their HTML table equivalents. In this article, I’ll demonstrate how this will have a huge impact on the way we use CSS for web page layouts.
Using CSS Tables
CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value
table for thedisplay property of an element allows you to display the element and its descendants as though they’re table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it—without the semantic problems of marking up non-tabular content as a HTML table in the document.Before we dive in and discover how this works, let’s create an instant demonstration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
⋮ HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
⋮ navigation column content…
</div>
<div id="extras">
⋮ news headlines column content…
</div>
<div id="content">
⋮ main article content…
</div>
</div>
</div>
</body>
</html>
The HTML source matches the desired content display order. The nav column comes first, followed by the extras column, and then the content column.
We also need to apply the following CSS:
#main {
display: table;
border-collapse: collapse;
}
#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}
#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}
The fresh CSS table-based layout that we’ve just created will display correctly in Internet Explorer 8 as well as in Firefox, Safari, and Opera; the image below shows how it looks in IE8.
0 comments:
Post a Comment