CSS Layout

Discussion in 'CSS' started by x_l6_x@hotmail.com, Dec 11, 2007.

0
  1. #1
    Hello, I have come across this code and wondered if someone could explain to me how it works, and whats going on in the code so I can learn how to create layouts like it using CSS. :)

    Index:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css"> <!-- link to css file -->
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
		<div id="container"><!-- link to css file to display to page -->
		<div id="header"></div> <!-- link to css file to display to page -->
		<div id="left"></div> <!-- link to css file to display to page -->
		<div id="middle"></div><!-- link to css file to display to page -->
	  	<div align="center"></div> <!-- link to css file to display to page -->
		<div id="right"></div> <!-- link to css file to display to page -->
	<br/>
</div>
</body>
</html>

<!-- end of html -->
    Code (markup):
    CSS File:
    
body, html { /*body details */
margin: 0;
padding: 0;
font: 11px tahoma, arial, serif;
}
#container { /*container details */
margin: auto;
padding: 0;
width: 760px;
border: 1px solid #000000;
}
#header { /*header details */
width: 760px;
height: 120px;
border-bottom: 1px solid #000000;
}
#left { /*left details */
width: 180px;
float: left;
height: 500px;
}
#middle { /*middle details */
width: 398px;
float: left;
height: 500px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#right {/*right details */
width: 180px;
height: 500px;
float: left;
}
br {
clear: both;
}
    Code (markup):

     
    x_l6_x@hotmail.com, Dec 11, 2007 IP