Following is my css code that I am using in laying my page out and the HTML program only consist of div statement.
Expand|Select|Wrap|Line Numbers
- html, body
- {
- padding: 0;
- margin: 0;
- height: 100%;
- font-size: xx-small;
- font-family: arial, helvetica, sans-serif;
- }
- body
- {
- margin: 0;
- padding: 0;
- margin: 175px auto;
- background-color: #3399fe;
- }
- /*
- The normal size is 1 em or 100% We set the text that is twice the size by specifying
- 2em or 200%. In this way the size will be relevant to the screen size and font
- size that is used and therefore should be consistent among compliant browsers.
- */
- .emsize
- {
- font-size: 2em;
- color: #0000FF;
- }
- .menu
- {
- list-style-type: none;
- font-size: 1.5em;
- margin: 5px;
- padding: 5px;
- }
- #facelogo
- {
- position: absolute;
- top: 3%;
- left: 40px;
- background-image: url(../images/new-face-logo.png);
- background-position: left;
- background-repeat: no-repeat;
- height: 150px;
- width: 175px;
- }
- #scroller
- {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- overflow: auto;
- }
- #content
- {
- padding-top: 5px;
- padding-right: 20px;
- padding-bottom: 10px;
- padding-left: 20px;
- }
- /*
- The following section is setting up parameters use for setting up a 3 column
- Web page using pecentage. An attribute "display: inline" was added to the first
- column to eliminate a bug that occurs in IE 5, 5.5, and 6. These browsers have
- some quirks when it comes to margins and floats, and sometimes will cause the
- column to slip down past the others. This fix should do the trick.
- */
- #column1
- {
- float: left;
- margin-left: 2%;
- width: 126px;
- height: 480px;
- background-color: #d0f3ef;
- text-align: center;
- }
- #column2
- {
- position: relative;
- float: left;
- width: 61%;
- margin-left: 2%;
- height: 480px;
- background-image: url(../images/lb-logo-chara-large480x435.png);
- background-position: 45px 75%;
- background-repeat: no-repeat;
- background-color: #FEF2D8;
- display: inline; /* Fixs double float which occurs in Internet
- Explorer 5, 5.5 and 6. */
- }
- #column3
- {
- position: absolute;
- float: left;
- width: 14em;
- margin-left: 2%;
- height: 480px;
- background-color: #d0f3ef;
- text-align: center;
- }
- #bottom-left
- {
- background-image: url('../Image/corners/Stdcorners/bottom-left.gif'); /* CHANGE: path and name of your image */
- height: 9px; /* CHANGE: height of your image */
- background-repeat: no-repeat;
- font-size: 2px; /* DNC: correction IE for height of the <div>'s */
- margin-right: 9px;
- }
- /*
- In the footer is an attribute "clear: both". This is used so the Liquid Layout
- will stay above the footer, and the footer will be below the
- layout design.
- */
- .clearfooter
- {
- height: 0;
- clear: both;
- }
- #footer
- {
- position: relative;
- clear: both;
- height: 45px;
- margin-top: 20px;
- font-size: 12px;
- text-align: center;
- }
- h1
- {
- font-size: 2em;
- font-family: Arial
- }
- p
- {
- font-size: 1.5em;
- font-family: Arial
- }