How to Eliminate Tables from Your Design (basic)

(this is the one due 2/7…)

Unless you are actually inserting tabular data onto your webpage, it’s best to not use the table tag for structure. If you want to format images/divs/blocktexts side-by-side on your webpage, it’s best to use the “float” tool in CSS. This is the same tool used in creating a horizontal navigation bar.


1. First off, create a div section for the items that you want to “float” horizontally with the <div></div> tags. If you’re not sure what the purpose of a div tag is, check out tutorials and examples.

2. Mark or name this div using the “class” tag with a name easy to recognize for you or anyone else viewing the code. I named mine “header” since… well I was creating  a div that would operate as the header on my webpage.

<div class=”header”>

<img src=”; alt=”me smiling”/>

<img src=”; alt=”Hannah”/>



1. In the <head></head> section of your webpage, create a marker called .header . This will tell the browser to target the div titled “header” and make it float.

2. Tell the .header to float. I use float:left because it works the best for me. Look up on tutorials if you want to try “right”, “inherit”, etc. Throw in a margin if you want extra space between the “header” div and the next div.

.header img {float:left;


3. If you leave it like this, the following text and images will flow around the header div, like a web diagram. Unless you really want your website to do this, you’ll have to name the following div “text_line”.

<div class=”text_line”>

<h2>Composing Digital Media : EngCmp 0610</h2>

<h3>January 24, 2011</h3>

<p>Temporarily uploading my website to the Pitt server.</p>


4. In CSS, mark .text_line and tell it to stay put under the floating header. I’m not sure of the history behind this, but basically you’re telling the browser to clear the “float” demand on both sides of the div.

.text_line {clear:both;}

5. Any other marked divs that you have,  you need to clear the “float” demand as well. For instance, I have a div marked “nav” for my horizontal navigation bar. I want my navigation bar to stay where it is, so I also tell that to clear both.

.nav {clear:both;}

6. For a live, working example, you can check this site, right click, and “inspect element” or “view source” to look at the code.

7. Make sure that you have a DOCTYPE on the top of your code. The instructions I just wrote out are most compatible with HTML 4.0 Transitional, but experiment if you would prefer using another DOCTYPE.

8. Send all of your experiments through a CSS practice board and a CSS and HTML validator before posting to the web!

-Hannah Miller

~ by him22 on January 31, 2011.

%d bloggers like this: