Ребят, помогите, пожалуйста, с версткой.

[Stranger]

Проблема следующего характера: блок с контактами, карта и форма должны быть отдельными блоками, то есть, сначала идут контакты, справа от контактов идет карта, и под контактами находится форма. Помогите, пожалуйста, найти ошибку в коду, т.к. форма после всех манипуляций находится явно не насвоем месте (по фаербагу она залазит на контакты, да и так это видно). Привожу пример кода:

<article class = "content" role = "main">
					    <div class="container">
						    <div class="sidebar">
							    <ul class="sidebar_list">
								    <li class="sidebar_item"><a href="#">Главная страница</a></li>
								    <li class="sidebar_item"><a href="#">Компания</a></li>
								    <li class="sidebar_item"><a href="#">Вывоз мусора</a>
									    <ul class="sidebar_sublist">
										    <li class="sublist_item"><a href="#">Вывоз строительного мусора</a></li>
										    <li class="sublist_item"><a href="#">Вывоз бытовых отходов</a></li>
										    <li class="sublist_item"><a href="#">Вывоз строительных отходов</a></li>
									    </ul>
								    </li>
								    <li class="sidebar_item"><a href="#">Вывоз снега</a></li>
								    <li class="sidebar_item"><a href="#">Аренда строительной техники</a></li>
								    <li class="sidebar_item"><a href="#">Контакты</a></li>
							    </ul>
							    <div class="offer">
								    <p>
									    Мы предлагаем
								    </p>
								    <ul class="offer_list">
									    <li class="offer_item">Вывоз строительного мусора</li>
									    <li class="offer_item">Ввыоз промышленных отходов</li>
									    <li class="offer_item">Ввыоз твердых бытовых отходов</li>
									    <li class="offer_item">Вывоз жидких отходов</li>
									    <li class="offer_item">Погрузка и вывоз снега</li>
									    <li class="offer_item">Аренда стрительной техники</li>
									    <li class="offer_item">Аренда коммунальной техники</li>
									    <li class="offer_item">Клининговые услуги</li>
									    <li class="offer_item">Приобретение вторсырья</li>
								    </ul>
							    </div>
						    </div>
						    <div class="main_content">
							    <div class="contact">
								    <p class="contact_header">
									    Контакты
								    </p>
								    <p class="contact_text">
									    Мы находимся на Новочеркасском прспекте, дом 44, офис 644.
								    </p>
									 <p class="conact_phone">
										 Наши телефоны:
										 <span>921 977-10-15</span>
										 <span>901 300-65-17</span>
									 </p>
								    <p class="conact_phone_city">
									    Городской номер и факс
									    <span>555-55-16</span>
								    </p>
							    </div>
							    <div class="map">
							    </div>
							    <div class="feedback">
								    <form action="" method="post">-->
									    <input type="text" name="first_name" size="30"/>
									    <input type="text" name="email" size="30"/>
									    <input type="text" name="theme" size="30"/>
									    <textarea name="comments" class="comment" cols="40" rows="10"></textarea>
								    </form>
							    </div>
						    </div>
					    </div>
				    </article>

и css

article .container{
  clear:both;
}
article{
  background-color:#fff ;
}
.sidebar{
  float: left;
  width:228px;
  margin-top: 15px;
}
.sidebar_list{
  list-style: none;
  background-color:#e7ebef ;
  padding: 20px 0 25px 15px;
  border-radius:0 8px 8px 0;
}
.sidebar_item{
  display: block;
  background: url("../img/content/bullet.png") 0 50% no-repeat;
  margin-top: 10px;
}
.sidebar_item :nth-child(3){
  background: url("../img/content/bullet.png") 0 5px no-repeat;
}
//padding-bottom: 10px;
.sidebar_item a{
  display: block;
  color:#325596;
  padding-left: 14px;
  font-size: 14px;
  line-height: 18px;
}
.sidebar_sublist{
  margin-left: 12px;
  list-style: none;
}
.sublist_item{
  display: block;
  background: url("../img/content/bullet_small.png") 0 50% no-repeat;
  margin-top: 8px;
}
.sublist_item a{
  display: block;
  font-size: 12px !important;
  color:#325596;
  line-height: 16px;
  padding-left:12px;
}

.offer{
  margin:25px 0 0 18px;
}
.offer p{
  color: #162745;
  font-size: 18px;
  line-height: 24px;
}
.offer_list{
  list-style: none;
}
.offer_item{
  margin-top: 10px;
  display: block;
  color: #2d2f32;
  font-size: 12px;
  line-height: 16px;
  padding-left:10px;
  background:url("../img/content/offer_bullet.png") 0 50% no-repeat ;
}
  .offer_item:first-child{
    margin: 0;
  }

  .main_content{
    margin-left:228px ;
  }
  .contact{
    margin:55px 0 0 45px;
    width:298px;
    float:left;
  }
  .contact_header{
    color:#4e861f;
    font-size: 22px;
    line-height: 26px;
  }
  .contact_text, .contact_phone, .conact_phone_city {
    color: #2d2f32;
    font-size: 14px;
    line-height: 18px;
  }
  span{
    display: block;
    margin-top: 5px;
    color: #2d2f32;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
  }
  .map{
    width:335px;
    height:210px;
    border:1px solid black;
    float:left;
    margin: 85px 0 0 45px;
  }
  .feedback{
  //margin-top: 50px;
    width:390px;
    background-color:#eceef0 ;
  }
  form  input{
    margin-top:20px;
  }
  input:first-child{
    margin: 0;
  }

Извините, если где в коде напутал что, потому что уже с ног сбился искать ошибку((.

Заранее благодарен.

Edited April 27, 2013 by Stranger

[red4pony]

Возможно поздно. Попрубуйте такую конструкцию:

html - файл:

<div class="conatainer">
	 <div class="sidebar">
	 </div>
	 <div class="main_content">
	 </div>
	 <div class="map">
	 </div>
</div>

CSS:

sidebar,
main_content,
map {
	 display:inline-block;
	 width:30%; /*остальные разделите на margin/padding*/
}

Схема -

[Splin]

Выложите код на jsfiddle - нада уважать чужое время)