WN - CSS - DIV

Hej!
Jag har ett par exempel som jag skrivigt till en vänn i England om design med CSS som du kan kolla på. Testa att lägga in koden i ett html dokument och kolla på det och studera källkoden.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>basicDesignWithCSS</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">





<style type="text/css">

<!--

        body {

 width:510px;

        }

        .top{

 padding:5px; 

 width:500px; 

 height:20px;

 background-color:#666666;

        }

        .box1Main {

 background-color:#999999; 

 padding:5px; 

 width:500px;

        }

        .boxMainLeft {

 background-color:#CCCCCC; 

 padding:5px; 

 width:245px; 

 float:left;

        }

        .boxMainRight {

 background-color:#999999; 

 padding:5px; 

 width:245px; 

 float:right;

        }

        .boxMainBottom {

 background-color:#009966; 

 padding:5px; 

 width:500px; 

        }

        .bottomLeft {

 background-color:#FF9900; 

 padding:5px; 

 width:160px; 

 float:left;

        }

        .bottomMiddle {

 background-color:#FFCC00; 

 padding:5px; 

 width:160px; 

 float:left;

        }

        .bottomRight {

 background-color:#FFCCCC; 

 padding:5px; 

 width:160px; 

 float:right;

        }

        .clearFloat {

 clear:both;

        }

        .myLink a:link {

 color:#00FF00;

 text-decoration:none;

        }

        .myLink a:visited {

 color:#00FF00;

 text-decoration:none;

        }

        .myLink a:hover {

 color:#FF0000;

 text-decoration:none;

        }

        .myLink a:active {

 color:#00FF00;

 text-decoration:none;

        }

        

-->

</style>

</head>



<body>



<!--

        We start of with a basic 2 part box, with a top and main box

-->



        <!--Top-->

        <div class="top"> 

 Box 1

        </div>

        <!--Main-->

        <div class="box1Main"> 

 Main text 1!<br />

 Main text 2!<br />

 Main text 3!<br />

 Main text 4!        

        </div>



<br />





<!--

        Lets advance and make the same as above but adding left and right into main.

-->



        <!--Top-->

        <div class="top"> 

 Box 2

        </div>

        <!--Main Left-->

        <div class="boxMainLeft"> 

 Main text left 1!<br />

 Main text left 2!<br />

 Main text left 3!<br />

 Main text left 4!<br />

        </div>

        <!--Main Right-->

        <div class="boxMainRight"> 

 Main text right 1!<br />

 Main text right 2!<br />

 Main text right 3!<br />

 Main text right 4!<br />

        </div>

        <div class="clearFloat"></div>



<br />



<!--

        Lets advance even more adding a 3rd box in our main.

-->



        <!--Top-->

        <div class="top"> 

 Box 3

        </div>

        <!--Main Left-->

        <div class="boxMainLeft"> 

 Main text left 1!<br />

 Main text left 2!<br />

 Main text left 3!<br />

 Main text left 4!<br />

        </div>

        <!--Main Right-->

        <div class="boxMainRight"> 

 Main text right 1!<br />

 Main text right 2!<br />

 Main text right 3!<br />

 Main text right 4!<br />

        </div>

        <!--Main Bottom-->

        <div class="boxMainBottom"> 

 MAIN!

        </div>



<br />



<!--

        Lets advance even more adding a 3rd box in our main.

-->



        <!--Top-->

        <div class="top"> 

 Box 4 

        </div>

        <!--Main Left-->

        <div class="boxMainLeft"> 

 Main text left 1!<br />

 Main text left 2!<br />

 Main text left 3!<br />

 Main text left 4!<br />

        </div>

        <!--Main Right-->

        <div class="boxMainRight"> 

 Main text right 1!<br />

 Main text right 2!<br />

 Main text right 3!<br />

 Main text right 4!<br />

        </div>

        <!--Main Bottom-->

        <div class="boxMainBottom"> 

 MAIN!

        </div>

        <!--Bottom Left-->

        <div class="bottomLeft"> 

 <p class="myLink"><a href="#">Link 1</a></p>

        </div>

        <!--Bottom Middle-->

        <div class="bottomMiddle"> 

 <p class="myLink"><a href="#">Link 2</a></p>

        </div>

        <!--Bottom Right-->

        <div class="bottomRight"> 

 <p class="myLink"><a href="#">Link 3</a></p>

        </div>

        <div class="clearFloat"></div>



</body>

</html>
Annars har väll W3school gamska bra tutorials, http://www.w3schools.com/

Ha det och lycka till!