Блок "content"

aqhe · 12.11.2010

Всем привет, я новичек в области HTML, у меня возникла проблема - блок "CONTENT" скотился вниз, а первый и второй блок стоят нормально. Если переставлю блок контент перед первым блоком, то первый блок скатывается вниз а блок контент с вторым блоком остается, тоже самое с вторым блоком, если блок контент поставить в конце первого и второго блока то он скатывается вниз....скажите пожалуста, как всё это исправить? Заранее спасибо, если надо могу ссылку сайта отправить в ЛС.

1ive · 12.11.2010

Давай ссылку в ЛС.
Хотя лучше будет и здесь оставить.)

hosm · 12.11.2010

aqhe сказал(а):
если надо могу ссылку сайта отправить в ЛС.

из-за малого кол-ва сообщений не сможете, пишите здесь в теме.

aqhe · 13.11.2010

assassinbrother.ucoz.net

1ive · 13.11.2010

Ах) когда же юкоз умрет))

Блок <div id="content">
Нужно поместить перед блоком <div id="right">,
предварительно исправив

Код:

<div id="right" >

на

Код:

</div><div id="right">

Добавлено:
Блин)учитесь закрывать теги) горе-кодеры...
Около 8и незакрытых </div> и один </ul>

aqhe · 13.11.2010

Исправил, но как я выше писал, первый блок и блок контент уже стоят правильно, а второй блок сехал как контент раньше - вниз

1ive · 13.11.2010

Насколько я понял вы сами пыталиссь переделать шаблон?

Иcходя из того, что есть - получается:
Блок right имеет ширину, равную 100% ширины всего тела страницы, что видно на скриншоте:

А значит иcходя из размеров просто не может поместиться между блоком content и правой границей, поэтому сдвигаетя вниз.
Где-то вы накасячили в коде с <div> или в css с размерами.
(или и в том, и в другом)

Ошибка тут:

Код:

style="font-size:2pt;padding-top:2px;text-align:left;margin-left:740px"

Лучше оставьте здесь изначальный, не испорченый кривыми ручками код и css

aqhe · 13.11.2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Название сайта</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>
<body>

<div id="wrapper">

<div id="header">


<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">RSS</a></li>
<?if($USER_LOGGED_IN$)?><li><strong><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></strong></li> <?else?> <li><strong><a href="$REGISTER_LINK$">Регистрация</a></strong></li><?endif?>
<?if($USER_LOGGED_IN$)?><li><strong> <a href="$LOGOUT_LINK$">Выход</a></strong></li><?else?> <li><strong><a href="$LOGIN_LINK$">Вход</a></strong></li><?endif?>

</ul>
</div>

</div>


<div id="page">
<div id="header-pic"></div>
<div id="content">
<div class="post">

<div class="entry">


<div class="entry">
<p><a href="#">Новые обои</a> | <a href="#">Лучшие обои</a> | <a href="#">Популярные обои</a> | <a href="#">Теги</a> | <a href="#">Чат</a> | <strong><a href="#">Добавить обои</a> </strong></p>

</div>

<p>На нашем сайте Вы можете бесплатно загрузить любые предлагаемые в альбомах обои на рабочий стол. Галерея наполнена сотнями изображений разного размера, разного жанра. Сайт находится в режиме постоянного пополнения, благодаря нашей и вашей активности портала. Мы не просим заполнять какие либо данные или за что то платить, все обои доступны без регистрации для максимального удобства посетителей. На главной странице приведены свежие добавления, отсортированные по категориям: девушки, мужчины, компьютерная графика, автомобили, природа, кинофильмы, юмор, музыка, авиация, мотоциклы, мультфильмы, города и страны, фэнтези, цветы, разное...</p>

<p>Если вы давно искали сайт на котором можно быстро и бесплатно скачать качественные обои, то вы находитесь там где нужно. Мы даем вам возможность заглянуть в огромную коллекцию обоев на самые популярные темы. Все материалы тщательно отсортированы по нужным категориям, что поможет вам легко найти желаемые изображения. </p>

<p>Мы уверяем вас, что вам понравится на нашем проекте, ведь мы предлагает различные варианты обоев на самые запрашиваемые темы. Мы регулярно обновляем свою коллекцию. С уважение администрация сайта...</p>

$ИНФОРМЕР ФОТОАЛЬБОМА$



</div>

</div>
</div>

<div id="sidebar">
<div id="sidebar-bgtop"></div>
<div id="sidebar-content">
<div id="sidebar-bgbtm">
<ul>
<li id="search">
<h2>Поиск</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="s" name="s" value="" />
<input type="submit" id="x" value="Поиск" />
</fieldset>
</form>
</li>
<li>
<h2>Категория: </h2>
<ul>
<li><a href="#">Девушки / Girls</a></li>
<li><a href="#">Мужчины / Men</a></li>
<li><a href="#">Комп. графика / PC Graphics</a></li>
<li><a href="#">Автомобили / Cars</a></li>
<li><a href="#">Природа / Nature</a></li>
<li><a href="#">Кинофильмы / Films</a></li>
<li><a href="#">Юмор / Humour</a></li>
<li><a href="#">Животные / Animals</a></li>
<li><a href="#">Музыка / Music</a></li>
<li><a href="#">Авиация / Aviation</a></li>
<li><a href="#">Мотоциклы / Motorcycle</a></li>
<li><a href="#">Мультфильмы / Cartoons</a></li>
<li><a href="#">Города и страны / City and country</a></li>
<li><a href="#">Фэнтези / Fentezi</a></li>
<li><a href="#">Цветы / Flowerses</a></li>
<li><a href="#">Разное / Other</a></li>

</ul>
</li>

<li>
<h2>Статистика</h2>
<p>&#160&#160$COUNTER$</p>
</li>



</div>
</div>
</div>

<div style="clear:both; margin:0;"></div>
</div>


</div>

<div id="footer">
<p>© 2010 Название сайта <a href="http://freed-net.ru/">FreeD-Net</a>. $POWERED_BY$</p>
</div>

</body>
</html>

body {
margin: 0px;
padding: 0px;
background: #ffffff;
text-align: justify;
font: 13px Arial, Helvetica, sans-serif;
color: #444444;
}

h1, h2, h3 {
margin-top: 0px;
font-weight: normal;
color: #ffffff;
}

h1 {
font-size: 2.4em;
}

h2 {
font-size: 1.8em;
}

h3 {
font-size: 1.4em;
}

p, ol, ul {
margin-bottom: 1.8em;
line-height: 160%;
}

a {
color: #000000;
}

a:hover {
text-decoration: none;
color: #FF0000;
}

a img {
border: none;
}

#wrapper {
width: 1100px;
margin: 0 auto;
border: 2px solid #fffffc;
}

/* Header */

#header {
width: 1100px;
height: 40px;
margin: 0px auto;
}

#header a {
text-decoration: none;
color: #000000;
}

/* Logo */

#logo {
float: left;
padding-left: 20px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
}

#logo h1 {
padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
float: right;
}

#menu ul {
margin: 0px;
padding: 10px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin: 0px;
}

#menu a {
display: block;
width: auto;
padding: 6px 20px;
}

#menu a:hover {
text-decoration: underline;
}

#menu .active {
background: #cccccc;
}

#menu .active a {
background: url(images/img02.gif) no-repeat 100% -40px;
}

/* Page */

#page {
width: 1100px;
margin: 0px auto;
padding: 10px 0px 0px 0px;
background: #ffffff;
}

#header-pic {
background: url(images/img05.jpg) no-repeat left top;
width: 1100px;
height: 210px;
}

/* Content */

#content {
float: right;
width: 770px;
}

.post {
margin: 0px 0px 30px 0px;
}

.post .title {
margin: 0px;
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
padding: 0 20px;
}

.post .meta {
font-weight: bold;
padding-left: 20px;
}

.post .byline {
margin: 0px;
padding-left: 20px;
}

/* Sidebar */

#sidebar {
float: left;
width: 300px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
background: url(images/img01.jpg) repeat-y left top;
}

#sidebar ul {
padding: 0px 0 5px 0;
margin: 0px;
list-style: none;
}

#sidebar li li {
margin-left: 20px;
margin-right: 20px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}

#sidebar h2 {
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Search */

#search {
}

#search form {
margin-bottom: 1.8em;
padding: 0px;
}

#search fieldset {
margin-left: 20px;
padding: 0px;
border: none;
}

#search #s {
width: 160px;
}

/* Footer */

#footer {
clear: both;
width: 900px;
height: 50px;
margin: 0px auto 30px auto;
color: #000000;
}

#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}

#footer a {
color: #000000;
}

Это стандартный шаблон который взят в основу сайта. Второй(правый) контейнер добавлял сам....
Если можете поправьте как правильно пожалуста, а то уже хочу заполнять сайт а этот блок уже достал :ya_lamo:
Вот которые сейчас:
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">HTML:</div></div><div class="sp-body"><div class="sp-content">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Assassin'sBrother</title>
<meta name="title" content="assassinbrother.ucoz.net — фан-сайт серии игр Assassin's Creed">
<meta name="Keywords" content="assassins creed, ассассинс крид, assassins creed 2, ассассинс крид 2, assassins, brotherhood, assassins creed brotherhood, ассассины, хашашины, creed, кредо, кредо ассассинов, fan site, altair, альтаир, ezio, эцио, ezio auditore de firenze, эцио аудиторе де фиренце, wallpapers, обои, прохождение, solution, новости, news, скриншоты, sreenshots, screen, видео, video, fan video, трейлеры, trailers, скачать, бесплатно, download, free, саундтрек, soundtrack, ост, ost, jesper cyd, jesper kyd, jasper cyd, jasper kyd, джеспер кид, джаспер кид, выдвижной клинок, оружие, аль-муалим, братство ассассинов, logo, ubisoft, saves, cheats, demos, movies, commercials, tv ads, adverts, screen savers, walkthough, assassins youtube">
<meta name="Description" content="фан-сайт серии игр Assassin's creed">
<meta name="Author" content="RX-7">
<meta name="Author-Email" content="admin@assassinbrother.ucoz.net">
<meta name="Classification" content="Games, Software, News, Links">
<meta name="Category" content="Games, Software, News, Links">
<meta name="revisit-after" content="1 day">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link type="text/css" rel="StyleSheet" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var images= new Array('images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg','images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg');
var pic_old='images/3.jpg';
var pic='images/5.jpg';
function start_show(){
el=$('.pic').get(0);
$(el).fadeOut('slow',function(){
$(el).attr('src',pic);
$(el).fadeIn('slow',function(){
while (pic==pic_old)
pic = images[Math.floor(Math.random()*images.length)];
});
});
pic_old=pic;
setTimeout('start_show()',8000);
}

</script>
<style>
* body
.img {border:0px dotted #fff; width:0px; height:200px; margin:0px auto;margin-right: 413px;}
.img img {width:160px; height:200px;}
</style>
<style type="text/css">
#layer2 {
background: #fff;
width: 100%;
height: 50%;
padding: 1px;
}
</style>
</head>
<body>

<div id="header">

</div>


<div id="page">
<div id="header-pic"></div>
<div id="content">
<div class="post">

<div class="entry">



<div id="menu">
<div id="navcontainer">

<ul id="navlist">
<li><a href="http://assassinbrother.ucoz.net/">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Плагиаторы</a></li>
<li><a href="#">Правила</a></li>
<?if($USER_LOGGED_IN$)?><li><strong><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></strong></li> <?else?> <li><strong><a href="$REGISTER_LINK$">Регистрация</a></strong></li><?endif?>
<?if($USER_LOGGED_IN$)?><li><strong> <a href="$LOGOUT_LINK$">Выход</a></strong></li><?else?> <li><strong><a href="$LOGIN_LINK$">Вход</a></strong></li><?endif?>
</ul>
</div>
</div>




</div>
</div>
</div>



<div id="contentwrapper">
<div id="left">
<div id="sidebar">
<div id="sidebar-bgtop"></div>
<div id="sidebar-content">
<div id="sidebar-bgbtm">
<ul>
<li id="search">
<h3>&nbsp&nbsp&nbsp&nbspПоиск</h3>
<form method="get" action="">
<fieldset>
<input type="text" id="s" name="s" value="" />
<input type="submit" id="x" value="Поиск" />
</fieldset>
</form>
</li>
<li>
<h3>&nbsp&nbsp&nbsp&nbspКатегории: </h3>
<ul>
<li><a href="#">Assassin's creed</a></li>
<li><a href="#">Assassin's creed 2 </a></li>
<li><a href="#">Assassin's creed Brotherhood</a></li>
<li><a href="http://assassinbrother.ucoz.net/forum">Форум</a></li>
<li><a href="#">Отзывы </a></li>
<li><a href="#">Прочее </a></li>
</ul>
</li>
<li>
<h3>&nbsp&nbsp&nbsp&nbspСтатистика</h3>
<p>$ONLINE_COUNTER$$ONLINE_USERS_LIST$</p>
</li>
<h3>&nbspЧат:</h3>

<div id="cboxdiv" style="text-align: left; line-height: 0">
<div><iframe frameborder="2" width="160" height="200"src="http://www2.cbox.ws/box/?boxid=2126845&boxtag=z1qwr2&sec=main" marginheight="0" marginwidth="0" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EDDEDB 2px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="2" width="160" height="80" src="http://www2.cbox.ws/box/?boxid=2126845&boxtag=z1qwr2&sec=form" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EDDEDB 2px solid;border-top:0px" id="cboxform"></iframe></div>
</div>




</div>
</div>

</div><div id="content">
<h2><font face="Monotype Corsiva, Arial">Добро пожаловать на сайт AssassinBrother!</font></h2>
<p><font face="Monotype Corsiva, Arial"><img src="images/logo.jpg" alt="" width="100" height="100" class="float_left" /><P>На нашем сайте вы найдёте много полезной информации по миру <B>Assassin's creed</B></P>
<P>Сайт на данный момент находится в стадии разработки</P>
<P>С уважением Администратор сайта</p></font>

<h2><font face="Monotype Corsiva, Arial">Форум</font></h2>
<P><font face="Monotype Corsiva, Arial">С этого дня работает форум, пока бета - версия, но это временно </font> </p>
<h2><font face="Monotype Corsiva, Arial">Дизайн</font></h2>
<font face="Monotype Corsiva, Arial"><P>Уважаемые посетители сайта, для стабильной работы сайта требуется авторизация...</P></font>
</div><div id="right" >
<h4>Случайное фото:</h4>
<div id="right" >
<div class="img">
<img src="1/1.jpg" align="center" class="pic" width="255" height="267" hspace="300" vspace="0" />
</div>
<script>start_show();</script>
</div>
<H4>Опрос:</H4>
$POLL$
<h4>Реклама:</h4>
<a href="http://topdrive.org.ua" target="_blank" title="Бесплатная раскрутка форумов"><img src="http://topdrive.org.ua/banners/logo.PNG" width="100" height="100" class="float_left" border="0"; /></a>
</div>


<div style="clear:both; margin:0;"></div>


<div id="footer">
<p>© 2010 AssassinBrother $POWERED_BY$</p>
</div>

</body>
</html>

body {

margin: 0px;
padding: 0px;
background: #FFF url(images/fond.gif) repeat-x fixed;;
text-align: justify;
font: 13px Arial, Helvetica, sans-serif;
color: #444444;

}

}

#right {
float: right;
width: 160px;
padding-top: 15px;
margin-right: 15px!important;
margin-right: 7px;
font-size: 0.9em;
}

}
h1, h2, h3 , {
margin-top: 0px;
font-weight: normal;
color: #ffffff;
}

h1 {
color: #FFFFFF;
padding-top: 110px;
padding-left: 130px;
font-size: 3em;
font-style: italic;
}
h2 {
font-size: 1em;
color: #9A0500;
background-image: url(images/h2.jpg);
background-repeat: repeat-x;
height: 42px;
padding-top: 3px;
margin-bottom: 20px;
padding-left: 8px;
}

h3 {
background-image: url(images/sidebar_heading1.jpg);
font-size: 0.8em;
height: 19px;
width: 135px;
color: #FFFFFF;
padding-top: 3px;
padding-left: 24px;
}

h4 {
background-image: url(images/sidebar_heading2.jpg);
font-size: 0.8em;
height: 19px;
width: 125px;
color: #FFFFFF;
padding-top: 3px;
padding-left: 10px;
padding-right: 24px;
margin-left: 740px;

}
H5 {
font-size: 0.4em;
}

p, ol, ul {
margin-bottom: 1.8em;
line-height: 160%;
}

a {
color: #000000;
}

a:hover {
text-decoration: none;
color: #FF0000;
}

a img {
border: none;
}

#wrapper {
width: 0px;
margin: 0 auto;
border: 2px solid #fffffc;
}

/* Header */

#header {
width: 900px;
height: 40px;
margin: 0px auto;
}

#header a {
text-decoration: none;
color: #000000;
}

/* Logo */

#logo {
float: left;
padding-left: 20px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
}

#logo h1 {
padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
float: right;
}

#top_nav {
<CENTER>background-image: url(images/nav_top.jpg);
height: 21px;
padding-top: 15px;
text-align: right;
padding-right: 20px;
color: #7E0200;
}

#main_nav {
background-image: url(images/main_nav.jpg);
height: 56px;
padding-left: 9px;
}

#menu ul {
margin: 0px;
padding: 10px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin: 0px;
}

#menu a {
display: block;
width: auto;
padding: 10px 20px;
}

#menu a:hover {
text-decoration: underline;
}

#menu .active {
background: #cccccc;
}

#menu .active a {
background: url(images/img02.gif) no-repeat 100% -40px;
}

/* Page */

#page {
width: 900px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: #ffffff;
}

#header-pic {
background: url(images/shapka4.jpg) no-repeat center;
width: 900px;
height: 200px;
}

/* Content */
#content {
margin-right: 200px;
margin-left: 280px;
padding: 15px 0;

}
.post {
margin: 0px 0px 30px 0px;
}

.post .title {
margin: 0px;
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
padding: 0 20px;
}

.post .meta {
font-weight: bold;
padding-left: 20px;
}

.post .byline {
margin: 0px;
padding-left: 20px;
}

/* Sidebar */

#sidebar {
float: left;
width: 260px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
background: url(images/img01.jpg) repeat-y left top;
}

#sidebar ul {
padding: 0px 0 5px 0;
margin: 0px;
list-style: none;
}

#sidebar li li {
margin-left: 20px;
margin-right: 20px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
margin-bottom: 1.8em;
list-style: none;
}

#sidebar h2 {
background: #444444 url(images/img02.jpg) no-repeat left 50%;
padding: 7px 25px;
font-size: 1.4em;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Search */

#search {
}

#search form {
margin-bottom: 1.8em;
padding: 0px;
}

#search fieldset {
margin-left: 20px;
padding: 0px;
border: none;
}

#search #s {
width: 160px;
}

/* Footer */

#footer {
background-image: url();
height: 35px;

width : 750px;
clear: both;
text-align: center;
padding-top: 10px;
}
#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}

#footer a {
color: #000000;
}
/**************************************** Menu ****************************/
#navcontainer ul
{
color: White;
float: left;
width: 200%;
height: 44px;
margin-right: 355px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 18px 1em;
height: 18px;
color: #720201;
text-decoration: none;
float: left;
background-image: url(images/menu_right_border.jpg);
background-repeat: no-repeat;
background-position: right top;
}

#navcontainer ul li a:hover
{
color: #fff;
background-image: url(images/menu_hover.jpg);
background-repeat: repeat-x;
}

img.float_left {
float: right;
}

1ive · 13.11.2010

Сейчас нет столько времени, чтоб каждую строчку исправлять.
Только укажу ошибки, из-за которых у вас ничего не получается
1.- в CSS грубейшая ошибка.

Код:

}

#right {
float: right;
width: 160px;
padding-top: 15px;
margin-right: 15px!important;
margin-right: 7px;
font-size: 0.9em;
}

}

Фигурные скобки здесь портят всю стуктуру файла, и блоки теряют стили.
Должно быть просто:

Код:

#right {
float: right;
width: 160px;
padding-top: 15px;
margin-right: 15px!important;
margin-right: 7px;
font-size: 0.9em;}

2.- отследите каждый тег.
Сколько тегов открылось, столько и должно закрыться, и очень важно, чтоб закрывались они правильно, и стояли на своих местах.

Установите себе dreamweaver, и по готовому двухколоночному шаблону сделайте для себя нужный дизайн

Блок "content"

aqhe

1ive

hosm

aqhe

1ive

aqhe

1ive

aqhe

1ive