Lissa Explains it All -- HTML Help for Kids


| Section 1 | Section 2 | Section 3 |


How do I make a CSS layout?



How do I make a CSS layout?   You can get started with these copy and paste layouts. The layout of the page you're looking at now was done with CSS. It has a top header div and three columms. The center column is fluid so that if you minimize the window the layout should fit every browser and resolution. Using CSS to format your pages instead of tables or frames is much more practical because you can change the layout on every page of your site with just one stylesheet. Also, CSS loads much faster than tables or frames and makes your site accessible to more people. The entire HTML code is included in a text area for each of the examples shown below.

The actual divs can be positioned in any order you want. If you want your content to load first, add that div first in the body of your html, for example:

<div id="content">content goes here</div>

<div id="menu">navigation goes here</div>

In the above example, the content would load first, and then the menu.




Basic Two Column Layout with Left Menu:

two column left menu CSS layout example






Basic two column layout with right menu:

two column with right menu CSS layout example






Basic two column layout with header:

two column with header CSS fluid layout example



Basic three column layout:

two column with right menu CSS layout example



Basic three column layout with header:

three column with header CSS fluid layout example



up




| About Lissa | Privacy Statement | Contact | Link Us |

Copyright 1997-2016 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.


lissaexplains.com


Lissa Explains it All -- HTML Help for KidsHTML Help, css, frames, tables, div layersCustom CursorsHTML Help ForumFree E-mail Service for Kids (and adults who love bright colors ;)Lissa Explains it All -- Free PostcardsLissa Explains it All -- MerchandiseLissa Explains it All -- Guestbook
HTML BasicsHTML TutorialCSS TutorialFrames TutorialTables TutorialColor TutorialFree JavascriptsFun Free Stuff for your siteMySpace TutorialHTML Tutorial
spacer