Css Layout

August 21st, 2007

Layout techniques using css. Cascading style sheets.

Over the next few weeks I am going to build an external working page (I will link to soon) with pictures, graphic images, text, navigation and anything else that pops into mind at any given time along the course of the project. In an effort to keep this blog going I will post in smallish segments, to enable me to write more frequently.

Disclaimer:

I have uncovered all I know from the web, and my own investigations. All tutorials are given in the understanding that information acquired here might in some cases not be the best solution to any possible hypothetical situation. Hold me not responsible for any psychiatric episodes you may experience on your personal quest to build a web site.
Enjoy:

The beginnings

Above is a div. It can be any size as specified by the style sheet or style rules.

html:
<div id="maincont"></div>

css:
#maincont {
 width:350px;
 height:200px;
 border:2px solid green;
 margin-left:30px; }

A div is just a box/container and is used to create a page layout. Divs can be placed within other divs, next to each other, or in any other combination you can imagine.

Below I am going to put another div inside the first and align it to the left.

html:
<div id="maincont1">
<div id="lfttbx"></div>
</div>

css:
#lfttbx {
 width:150px;
 height:50px;
 border:2px solid red;
 float:left; }

Floating a div like this is a common way to achieve a multi columned layout, or even more elaborate designs.
Below I will add another containind div to the structure, but align it to the right.

html:
<div id="maincont1">
<div id="lfttbx"></div>
<div id="rttbx"></div>
</div>

css:
#rttbx {
 width:180px;
 height:70px;
 border:2px solid blue;
 float:right; }

Entry Filed under: CSS Reaction, Design, Latest News, Webby