x_l6_@hotmail.com
-
Posts
2 -
Joined
-
Last visited
Never
x_l6_@hotmail.com's Achievements
Newbie (1/5)
0
Reputation
-
What is going on with the layout in this page?
x_l6_@hotmail.com replied to x_l6_@hotmail.com's topic in CSS Help
Thanks, I found that really helpful. I will also take a look at the tutorial site. Thanks, -
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 page: <!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> </p> <p> </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 --> CSS Page: 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; }