Я знаю, что это, наверное, очень просто, но я не могу найти решение. В основном в моем CSS мои поля перекрываются. Мой сайт должен быть отзывчивым, и когда я сокращаю окно браузера, окна начинают перекрываться. Они не перекрываются нормально, только когда я сжимаю окно, и они начинают перекрывать все больше и больше, чем меньше я это делаю. Я действительно не знаю, как это исправить, и мне нужна помощь. Два поля, которые перекрываются, являются content-box1 и content-left Код:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size:12px;
background: #394BA0;
color:#C180E4;
border-color:#88C6ED;
}
#wrapper {
width:62.7%;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
height: 1199px;
position: abosulte;
}
#header{
border:1px solid #bbb;
height:100px;
padding:10px;
}
#content-left {
width: 20%;
height: 30%;
border:1px solid #bbb;
margin-top: 15%;
position: absolute;
}
#content-main {
position: absolute;
}
#content-box1 {
width: 20%;
height: 26%;
border:1px solid #bbb;
margin-top: 1%;
position: absolute;
}
#content-box2 {
width: 20%;
height: 26%;
border: 1px solid #bbb;
margin-top: 1%;
margin-left:21%;
position: absolute;
}
#content-box3 {
width: 20%;
height: 26%;
border: 1px solid #bbb;
margin-top: 1%;
margin-left:42%;
position: absolute;
}
#bottom {
width: 27%;
height: 27%;
border: 1px solid #bbb;
position: absoulte;
margin-top: 100%;
}
Вы устанавливаете все позиции в абсолютные. Если вы измените размер окна, позиции не будут меняться относительно окна. Я бы рекомендовал использовать свойство "float", он намного более гибкий и может делать в основном одно и то же.
Подробнее: http://www.w3schools.com/cssref/pr_class_position.asp и: http://www.w3schools.com/cssref/pr_class_float.asp
С наилучшими пожеланиями.