Win a copy of Web Standards Solutions, The Markup and Style Handbook
In conjunction with those lovely people over at friends of ED we've got five copies of their latest book – Web Standards Solutions, The Markup and Style Handbook –
to give away to registered DMXZone members.
The author Dan Cederholm runs the SimpleBits website that not only carries a thought provoking blog, but also lots of stuff on standards-compliant design. Dedicated readers of our newsletter might remember that last week we featured the SimpleBits Web Standards link list.
To be in with a chance of winning a copy all you need to do is email us with your suggestion for a DMXZone article series that you'd really like to see. The best five suggestions will earn their contributor a copy of the book …. and might see their questions answered as we turn the ideas over to our skilled panel of authors.
To whet your appetite we've even got a sample chapter from the book you can download and read.
We'll announce the winners on July 8th, so get those suggestions in quick.
Method A: Floating the sidebar
<div id="header">
...header content here...
</div>
<div id="sidebar">
...sidebar content here...
</div>
<div id="content">
...main content here...
</div>
<div id="footer">
...footer content here...
</div>
The preceding example is the markup we'll be using to create a columnar layout with CSS using the float property. We've divided our page elements into logical segments using <div> tags—each of which have a unique id attached to them:
- #header: Contains a logo, navigation, etc.
- #sidebar: Contains extra contextual links and information
- #content: Contains the main body of text and focus of the page
- #footer: Contains copyright information, credits, ancillary links, etc.
Sectioning off these elements of the page enables us to take full control of the layout. By applying a few CSS rules, we'll have a two-column layout working in no time.
Styling the header and footer
The first step we'll take in making our structure a columned layout is to add some background color and padding to the header and footer. This will make it a bit easier to visualize.
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
Adding the preceding CSS to Method A's structure will give us what's found in Figure 12-2. I've added a bit of faux content to fill out the sections.
Figure 12-2. Adding style to the header and footer
Within these declarations for #header and #footer you could, of course, continue to add styles that are unique to those sections such as font-family, color, link colors, etc. Now let's create two columns.
Floating the sidebar
The essence of Method A is that it uses the float property to place the #sidebar to either side of the content <div>. For this example, we'll be placing it to the right of the content, but the reverse would work as well.
The key to floating the #sidebar is that it must appear before the content <div> in the markup. This way, the sidebar's top will line up with the content area's top.
We'll add the float property to the #sidebar as well as give it a width of 30 percent and a background color:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
Figure 12-3 shows us the results of adding the preceding CSS. You can see that the sidebar sits on the right, with the content area flowing around it.
Ian Blackham
Following a degree in Chemistry and a doctorate in Scanning Tunneling Microscopy, Ian spent several years wrestling with acronyms in industrial R&D (SEM with a side order of EDS, AFM and TEM augmented with a topping of XPS and SIMS and yet more SEM and TEM).
Feeling that he needed a career with more terminology but less high voltages, Ian became a technical/commissioning editor with Wrox Press working on books as diverse as Beg VB Application Development and Professional Java Security. After Wrox's dissolution and a few short term assignments Ian became content manager at DMXzone.
Ian is a refugee from the industrial Black Country having slipped across the border to live in Birmingham. In his spare time he helps out with the website of a local history society, tries to makes sure he does what his wife Kate says, and worries that the little 'un Noah is already more grown up than he is.