хорошо, если вас не устраивает мой предыдущий ответ, я пройдусь по нему шаг за шагом ...
есть очень много вещей, которые вы можете сделать неправильно с HTML / CSS, но есть также несколько вещей, которые вы можете сделать правильно, и если вы сделаете их правильно, вам придется гораздо меньше беспокоиться о том, что вы делаете неправильно. поэтому лучше выучить несколько вещей, которые вы можете сделать правильно, и поэтому я сказал вам прочитать другие вопросы / ответы.
Я мог бы попросить вас убрать строку "position: относительный" в вашем #main div, и вы обнаружите, что проблема исчезла ... но я бы не стал, потому что вы не улучшите свой CSS в целом.
сначала всего, используйте DOCTYPES. по возможности, используйте строгое так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
если вы считаете, что не можете применять строгие правила, используйте переходный режим, но имейте в виду, что вы уже снова откроете спектр возможных проблем.
секунда : не применять поля к тегам div, которые содержат ваш контент. instaed создайте тег div вокруг тега содержимого и примените поля! Вы можете использовать прокладки на контейнере, но без полей.
третий : используйте стек перезагрузок в начале таблицы стилей, доступно довольно много, хороший набор (поставляется с пакетом yui от yahoo), который я использую для многих сайтов со строгим xhtml следующим образом:
@charset "utf-8";
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
Adapted by Markus Hausammann
*/
/* reset rules */ * {
font-size: 100.01%;
overflow: hidden
}
html, body
{
color: #313131;
background-color: #ffffff;
font-family: Geneva, Arial, Verdana, Helvetica, sans-serif;
line-height: 1.2em;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
li {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*because legend doesn't inherit in IE */
legend {
color: #000;
}
del, ins {
text-decoration: none;
}
/* clearing methods */
/* clearfix method for clearing floats */ .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* essential for Safari browser !! */ .clearfix {
display: block;
}
/* removes ugly mozilla dotted link borders */
a:active
{
outline: none;
}
четвертый : не перемещайте более одного делителя в одном направлении, чтобы избежать некоторых проблем с IE. если вам нужно больше двух div-ов, создайте div-оболочки. так, например, для макета с тремя столбцами вы должны плавать первый столбец влево, а затем div-обертку с плавающей точкой: справа, содержащий второй столбец с плавающей запятой влево (внутри оболочки) и третий столбец с плавающей запятой внутри оболочки ... и т. д. easy но очень управляемый!
прежний ответ:
задайте ширину (maxwidth соответственно) для всех элементов div, перемещайте меню влево и содержимое справа. все проблемы решены. работает и для ширины в процентах.
OR
присвойте вашему главному div встроенный атрибут, а вашему меню div - фиксированную ширину.
OR
использовать сетки (например, http://developer.yahoo.com/yui/grids/ или http://www.blueprintcss.org/)
OR
Прочтите любые другие посты на эту тему в stackoverflow (см. Справа).