Вот статья(скрин):
Мой код, в котором вертикальный текст смещается на заголовок:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ПРОграммист</title>
<style type="text/css">
.center {
width: 800px; /* Ширина слоя в пикселах */
padding: 6px; /* Поля вокруг текста */
margin: 0 auto; /* Выравниваем по центру */
background: #4AA02C; /* Цвет фона */
color:#ffffff;
}
</style>
<style type="text/css">
.center1 {
width: 650px; /* Ширина слоя в пикселах */
margin: 0 auto; /* Выравниваем по центру */
}
</style>
<style type="text/css">
.vertical {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: tb-rl;
width: 10px;
}
</style>
</head>
<body>
<div class="center"><center><b>МЕРОПРИЯТИЯ, КОНФЕРЕНЦИИ</b></center></div>
<div class="center1">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="10" valign="top"><center><div class="vertical">Александра Кушнарева
pr@cee-secr.org</div></center></td><td valign="top">
<h2><font face="DejaVuSerif"><p style="color:#4AA02C">КОНФЕРЕНЦИЯ ПО РАЗРАБОТКЕ ПО CEE-SECR 2011</p></font>
</h2>
<p>
<img src="2.jpg" alt="автор статьи" align="right"
style="float: right; padding-left: 10px; padding-bottom: 10px;">
<font size="4"; face="DejaVuSerif"><p align="justify">Научно-практическая конференция «Разработка ПО 2011/ Software
Engineering Conference (Russia)» – ключевое событие индустрии
программирования России и стран Центральной и Восточной
Европы. История конференции началась в 2005 году. Тогда это
стало очень ярким событием для всего ИТ- сообщества России. За
прошедшие шесть лет конференция выросла до статуса международного
форума и стала знаковым событием как для российских разработчиков
программного обеспечения, так и для западных ИТ- специалистов.
</p>
</font>
</p>
</td>
</div>
</body>
</html>
Как это исправить?