So, let's get right to it! Open up your html editor of choice (I'll be using gVim). First, we'll create a simple xhtml page that has all the basic elements we need, but no styling information. It's generally a good idea to separate content (the stuff in the html file) from presentation (the style information in the css file) whenever possible.
Depending on which site is carrying this article, the formatting might be lost on the following code.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> http://www.w3.org/1999/xhtml";>
Title
blah blah
blah blah
Notice the id attributes on the div tags. Those allow us to style those parts of the page with CSS. Each id can only be used once in the page. If we wanted a reusable style, we'd use a class.
We've broken up the page into several logical sections: the header, the left and right columns, and the footer. Notice it's all wrapped in a div with an id of "page."
Now let's see how we'll style those sections with CSS. Make a new file in the same directory as this page, and name it page.css.
First, we'll set down some style information for the page as a whole.
body, html { margin:0; padding:0; } body { min-width:780px; } #page { margin:0 auto; width:780px; }
The margin setting for our page div centers it on screen. The min-width attribute for the body is required to make this work in some browsers. Notice we also set the margin and padding of the page to 0. The 780px is arbitrary, and you can change it to whatever you want (within reason -- remember that not everyone has a large monitor resolution, nor does everyone have their web browser maximized while browsing).
Now it's time to get #left and #right next to each other.
#left { float:left; width:280px; } #right { float:right; width:500px; }
The columns should be next to each other now, but we're not quite done. We have to "clear" our floats, and we can do that with our footer.
#footer { clear:both; }
This should get you going on the path to making your two column web design
No comments:
Post a Comment