Creating Your Layout

Divs


The basis of the layout for your website should be divs, not tables. A div is a block element, meaning it takes up the whole line and pushes other elements down. However this can be be changed by either converting it to a an inline object and for more controls setting a width and/or height for your div. Creating a div is simple, just type this code into the body of your document.

<div>
Content for your div would appear here.
</div>

If you want to make it inline, add a width, or a height these are the pieces of CSS you would use.

div { display:inline;
height:100px;
width:100px
}

Note: You can use px or % to specify your height and width, and in order to make an inline element a block element you can change inline to block.

Spans


Divs are generally used to hold multiple types of elements. If you want to change say one word out of a sentence you would use the span tag.

Changing <span>one</span> word.

Paragraphs


The p tag is also useful for formatting text, see how each paragraph on this page has a space between it? That was set up using CSS on the elements contained within the p tag. Each paragraph of text should be surrounded with it to allow for more control. This is a block element by default, although most resets set it to inline.

<p>There is no limit to the amount of text you can place in a paragraph. Even once they have been set to inline by a reset, you can actually change them through more code to allow you more control than the defaults the browser gives. There is no indent on them regardless, and on the web it is generally better to ignore the indent and instead place a blank line between paragraphs.</p>

Titles


There are another 6 tags that are helpful when it comes to more control. They are generally used for titles, subtitles, and captions. By default they are block elements, with different sizes and weights. They are h1 - h6, with h1 being the largest, h6 being the smallest, and h4 is generally the same size as default text.

<h1>Largest Title Size</h1>
<h2>Subtitles</h2>
<h3>Third Subtitle</h3>
<h4>Regular Text</h4>
<h5>Captions</h5>
<h6>Footer Text</h6>

These are all just suggested uses for each of these tags, if you go further into web design you will learn more about the various uses for these different tags in particular.

Breaks


While paragraphs can be useful in order to control the way text splits there are two useful tags. They will send text to a new line.

These words
<br />moves to the next line.

Changing Position


In order to tie this all together you will want to be able to control where these elements appear on the page. The easiest way is through absolute positioning. With absolute positioning you will be able to control where an element sits in relationship to the element it is inside of. You can position it from the top, right, left, and bottom of the element.

div { position:absolute;
top:100px;
left:200px;
}