Смещение блоков

[Evans]

Всем привет!

У меня проблема, не могу понять как решить.

Смещаются вот эти блоки:

CSS:

/* Left menu */

#left_menu {
	padding-right: 630px;
}

#left_menu #search_top {
	width: 310px;
	height: 44px;
	background: url(../images/search_top.png) 0 0 no-repeat;
}

#left_menu #search_middle {
	width: 310px;
	background: url(../images/search_middle.png) 0 0 repeat-y;
}

#left_menu #search_bottom {
	width: 310px;
	height: 4px;
	background: url(../images/search_bottom.png) 0 0 no-repeat;
}

#search_top h4 {
	color: #f7841d;
	font-weight: bold;
	padding-top: 5px;
}

.menu_name {
	width: 310px;
	height: 42px;
	background: url(../images/menu_name.png) 0 0 no-repeat;
}

.menu_name h4 {
	padding-top: 11px;
	color: #4e4e4e;
	font-size: 16px;
}

/* Right menu */

#right_menu {
	padding-left: 60px;
}

#right_menu .product_top {
	width: 305px;
	height: 30px;
	background: url(../images/header_product.png) 0 0 no-repeat;
}

.product_top h4 {
	color: #fff;
	font-size: 14px;
	padding-top: 8px;
	font-weight: bold;
}

#right_menu .product_middle  {
	width: 305px;
	background: url(../images/middle_product.png) 0 0 repeat-y;
}

#right_menu .product_bottom {
	width: 305px;
	height: 128px;
	background: url(../images/bottom_product.png) 0 0 no-repeat;
}

HTML:

					<div class="body_middle">
						<div id="right_menu">
							<div class="product_top">
								<h4>Apple iPad 2</h4>
							</div><!-- end product_top -->
							<div class="product_middle">

							</div><!-- end product_middle -->
							<div class="product_bottom">

							</div><!-- product_bottom -->
						</div><!-- end right_menu -->

						<div id="left_menu">
							<div id="search_top">
								<h4>Форма поиска</h4>
							</div><!-- end search_top -->
							<div id="search_middle">
								<form>
									<input type="text" name "brand" value="Марка"></input>
									<input type="text" name "product" value="Продукт"></input>
									<span style="padding-right: 8px;"><input type="submit" value="Искать"></input></span>
								</form><!-- end form search -->   	
								<br>
							</div><!-- end search_middle -->
							<div id="search_bottom">

							</div><!-- end search_bottom -->
							<br>
							<div class="menu_name">
								<h4>Детали компьютера</h4>
							</div><!-- end menu_name -->	
							<br>
							<div class="menu_name">
								<h4>Программное обеспечение</h4>
							</div><!-- end menu_name -->	
							<br>
							<div class="menu_name">
								<h4>PC / Ноутбуки</h4>
							</div><!-- end menu_name -->	
							<br>
							<div class="menu_name">
								<h4>Системы охлаждения</h4>
							</div><!-- end menu_name -->	
							<br>
							<div class="menu_name">
								<h4>Перифирия</h4>
							</div><!-- end menu_name -->	
							<br>
						</div><!-- end left_menu -->	

					</div><!-- end body_middle -->

Нужно чтобы они находились на равной высоте, помогите пожалуйста.

[mrnobody]

#left_menu {
  float: left;
}

#right_menu {
  float: right;
}

И паддинги можно удалить, конечно если они вам не нужны.

Edited August 12, 2012 by mrnobody

[Evans]

Пробовал, тоже самое ;(

[mrnobody]

Сделал их плавающими и убрал паддинги — http://jsfiddle.net/pgns4/

Пробовал, тоже самое ;(

Задайте фиксированную ширину этим элементам и попробуйте убрать паддинги.

Edited August 12, 2012 by mrnobody

[Evans]

mrnobody, большое спасибо!