Hi, everybody! I'm new in web-design, and currently i'm learning the DIV positioning. I have written some code and i'm not sure: have i understood the main idea or not. Plz, look at it and leave your comments and advices, i'll be very thankful :) Are all the sites done in this way?
The CSS:
body{
margin: 2% 15% 0% 15%;
background: #232323;
color: #C8E6E6;
font-family: "Verdana";
font-size: 16px;
}
.top, .middle_left_menu, .middle_content, .bottom{
background-color: #626262;
border: dashed #FFF 1px;
padding: 5px;
}
.top{
position: relative;
width: 100%;
height: 8%;
}
.middle_left_menu{
margin: 10px 10px 10px 0px;
position: absolute;
width: 10%;
height: 30%;
}
.middle_content{
margin: 10px;
position: relative;
left: 16%; /* is there any other way to put it by the right side of middle_left_menu? i measured "16%" by myself,
but can distance be measured and middle_content positioned automatically?*/
width: 50%;
height: 65%;
}
.bottom{
margin: 10px 10px 10px 0;
position: relative;
width: 100%;
height: 8%;
}
/*why it works properly on Opera and Mozilla, but doesn't on IE8? where is the bug?*/And the index.html:
<html>
<head>
<link rel="stylesheet" type="text/CSS" href="style.css">
</head>
<body>
<div class="top"> top </div>
<div class="middle_left_menu"> middle left menu </div>
<div class="middle_content"> middle main content </div>
<div class="bottom"> footer </div>
</body>
</html>Thnx :)
