Class examples

basic.html

<html>
<head>
<link rel="stylesheet" href="basics.css" />
</head>
<body>
    <div id="page">
        <div id="top">
            <div id="pic">
                <img src="images/monkey.png" height="110" width="110">
            </div>
            <div id="menu">
                <ul>
                <li>Tacos</li>
                <li>Seven</li>
                <li>Terms</li>
                <li>Alveyworld</li>
                <li>Obama</li>
                <li>Palin</li>
                </ul>
            </div>
        </div>
        <div id="bottom">
            <div id="left">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in massa ac arcu sagittis pulvinar at eu magna. Quisque massa lacus, placerat vel laoreet vel, adipiscing vel massa. Suspendisse dui purus, volutpat non aliquam in, fringilla sed sem. Cras purus metus, facilisis at congue at, euismod a metus. Curabitur lacus mi, elementum in porttitor elementum, hendrerit ac nunc. In convallis, ante non volutpat ultricies, odio justo sagittis enim, feugiat luctus tortor lectus nec nisi. Fusce faucibus, augue id viverra pulvinar, metus elit facilisis metus, et lobortis felis augue nec erat. Curabitur enim mi, aliquet sit amet fermentum ut, porta interdum metus. Etiam nec sapien ipsum, et aliquet enim. Aliquam eu dui at lacus ullamcorper posuere vel vel mauris. Morbi luctus leo tellus, placerat interdum felis. Proin ultrices ligula ac sapien tristique nec faucibus lacus auctor. Sed facilisis erat vitae eros gravida molestie.
            </div>
            <div id="right">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in massa ac arcu sagittis pulvinar at eu magna. Quisque massa lacus, placerat vel laoreet vel, adipiscing vel massa. Suspendisse dui purus, volutpat non aliquam in, fringilla sed sem. Cras purus metus, facilisis at congue at, euismod a metus. Curabitur lacus mi, elementum in porttitor elementum, hendrerit ac nunc. In convallis, ante non volutpat ultricies, odio justo sagittis enim, feugiat luctus tortor lectus nec nisi. Fusce faucibus, augue id viverra pulvinar, metus elit facilisis metus, et lobortis felis augue nec erat. Curabitur enim mi, aliquet sit amet fermentum ut, porta interdum metus. Etiam nec sapien ipsum, et aliquet enim. Aliquam eu dui at lacus ullamcorper posuere vel vel mauris. Morbi luctus leo tellus, placerat interdum felis. Proin ultrices ligula ac sapien tristique nec faucibus lacus auctor. Sed facilisis erat vitae eros gravida molestie.
            </div>
        </div>
    </div>
</body>
</html>

basic.css

body {
    background:#949494;
}
#page {
    background:#fedd14;
    width:786px;
    height:497px;
    margin:0px auto;
}
#top {
    height: 208px;
    width: 786px;
    background:#00a950 url('images/somewebsite_01.jpg');
}

#bottom {
    height:100%;
    background:#8cc7cf url('images/somewebsite_02.gif');
}

#menu{
    padding-top: 134px;
}
li{
    display: inline;
    padding-left: 33px;
    padding-right: 39px;
}

#pic {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}
#left{
    float: left;
    height: 200px;
    padding-left: 20px;
    padding-top: 20px;
    width: 350px;
}
#right{
    float: right;
    height: 200px;
    padding-right: 20px;
    padding-top: 20px;
    width: 350px;
}