<!DOCTYPE html>
<html>
<head>
<title>Чат</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jq.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<center>
<body>
<div class="container">
<table class="main_table">
<tr class="login_form">
<td>
Привет, <b>Zzepish</b>
[<a href="?exit=1">Выйти</a>]
</td>
</tr>
<tr>
<td class='menu'>
<pre>
<a href="./?index">Главная</a> <a href="./?chat">Чат</a>
</pre>
</td>
</tr>
<tr>
<td class="chanels">
ewrwr
</td>
<td class="msges">
wrwe
</td>
<td class="online">
rwrwe
</td>
</tr>
</table>
</div>
И такой CSS:
@charset "utf-8";
body {
margin:0px;
background-color:#cca97b;
}
body div.container{
margin-left:100px;
margin-right:100px;
margin-top:50px;
margin-bottom:0px;
}
.main_table{
height:800px;
width:100%;
}
.login_form{
background-color:#6f5a40;
height:20px;
text-align:center;
border-radius:5px;
border: 1px solid black;
}
input[type="text"],[type="password"] {
border-radius:5px;
}
.menu{
border: 1px solid black;
height:20px;
text-align:center;
background-color:#6f5a40;
border-radius:3px;
}
.menu a{
font-size:13px;
font-weight:bold;
color:#000000;
}
.menu a:hover{
color:silver;
}
.main{
vertical-align:top;
background-color:#9f805c;
border-radius:5px;
}
.reg_div{
height:100%;
height:100%;
border: 1px solid black;
text-align:center;
}
.reg_div div{
margin-top:100px;
}
.chanels{
border: 1px solid black;
text-align:center;
vertical-align:top;
background-color:#6f5a40;
border-radius:3px;
}
.msges{
border: 1px solid black;
text-align:center;
background-color:#6f5a40;
border-radius:3px;
}
.online{
border: 1px solid black;
text-align:center;
background-color:#6f5a40;
border-radius:3px;
}
В итоге я получаю такое:
Почему?
Ведь колонки в строках правильно прописаны же!