NextIndexPrevious

Programs in CSS

2. Creating a Webpage Layout using CSS. 

style.css

*{
	margin:0;
}

body{
	background-color:#09F;
}

#wrapper{
	width:980px;
	height:768px;
	background-color:#CC9;
	margin-left:auto;
	margin-right:auto;
}

#banner{
	width:960px;
	height:130px;
	background-color:#630;
	color:#FFF;
	font-size:36px;
	padding:20px 0 0 20px;
}

#menubar{
	width:980px;
	height:40px;
	background-color:#333;
}

#menubar ul{
	list-style-type:none;
	padding-left:0;
}

#menubar ul li{
	display:inline;
}

#menubar ul li a{
	width:196px;
	color:#FFF;
	text-decoration:none;
	float:left;
	text-align:center;
	line-height:40px;
}

#menubar ul li a:hover{
	color:#39F;
	background-color:#000;
}

#container{
	width:980px;
	height:538px;
	background-color:#FC9;
}

#footer{
	width:980px;
	height:40px;
	background-color:#333;
	color:#fff;
	text-align:center;
	line-height:40px;
}

#content{
	width:740px;
	height:528px;
	background-color:#FFF;
	float:left;
	margin:5px;
}

#sidebar{
	width:225px;
	height:528px;
	background-color:#660;
	float:left;
	margin:5px 5px 5px 0;
}

layout1.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="wrapper">
	<div id="banner">
    MyCollege.com
    </div>

    <div id="menubar">
	    <ul>
	    <li><a href="#">Home</a></li>
	    <li><a href="#">About</a></li>
	    <li><a href="#">Projects</a></li>
	    <li><a href="#">Features</a></li>
	    <li><a href="#">Contact</a></li>
	    </ul>
    </div>

    <div id="container">
	    <div id="content">
	    </div>
	    <div id="sidebar">
	    </div>
    </div>

    <div id="footer">
	    © 2015
    </div>
</div>

</body>
</html>
Output :

Click here