#postsaside{
float:right;
font-size:20px;
line-height:40px;
margin-left:5%;
width:35%;
}Then we float the sidebar and define its width:
html5_new_tags/stylesheets/style.css
#sidebar{
float:left;
width:25%;
}Last, we need to clear the floats on the footer so that it sits at the bottom of
the page. Remember that whenever we float something, the element gets
removed from the normal document flow. Clearing an element tells the
browser not to float that element.^1html5_new_tags/stylesheets/style.css
#page_footer{
clear:both;
display:block;
text-align:center;
width:100%;
}These are just basic styles. From here, I’m confident you can make this look
much, much better.Falling Back
Although this all works great in Internet Explorer 9, Firefox, Chrome, Opera,
and Safari, the people in management aren’t going to be too happy when they
see the mess that Internet Explorer 8 makes out of our page. The content
displays fine, but since Internet Explorer 8 doesn’t understand these elements,
it can’t apply styles to them, and the whole page resembles something from
the mid 1990s.The only way to make Internet Explorer 8 and older style these elements is to use
JavaScript to define the elements as part of the document. That turns out to be
really easy. We add this code to the <head> section of the page so it executes before
the browser renders any elements. We place it inside a conditional comment, a
special type of comment that only Internet Explorer will read.Chapter 2. New Structural Tags and Attributes • 24
Download from Wow! eBook <www.wowebook.com> report erratum • discuss