Нечетный CSS с плавающей точкой и ошибка? - PullRequest
1 голос
/ 30 января 2012

У меня странная проблема при работе на небольшом сайте.

Я не могу заставить свою обертку правильно обернуть все остальные мои дивы. Мой код выглядит так:

<body>
<div id="wrapper">
    <div id="header">
        <div id="menu">
        </div>
    </div>
    <div id="content">
        <div id="text">
            <form></form>
        </div>
        <div id="contact"><img />
            <map name="Map" id="Map">
            </map>
        </div>
    </div>
    <div class="clear"></div>
</div>
</body>

И CSS:

body {
    margin: 0px;
    background-image: url(../images/bg.jpg);
    background-repeat: repeat-x;
}
#wrapper {
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
}
#header {
    height: 560px;
    width: 1190px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/Header.jpg);
    background-repeat: no-repeat;
}
#menu {
    width: 640px;
    position: relative;
    left: 350px;
    top: 115px;
}
#content {
    width: 1190px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 10px;
}
#text {
    width: 550px;
    float: left;
    margin-bottom: 20px;
    position: relative;
    left: 180px;
}
#contact {
    float: left;
    margin-bottom: 20px;
    position: relative;
    left: 230px;
    top: 50px;
}
.clear {
    clear: both;
}

Кажется, что обертка наматывается на некоторые из моих страниц, но не на все, и если я укажу размер изображения в #contact, то он также не будет работать на других страницах. Тем не менее, он переносит тег #text.

Я очень рад за любую помощь!

С наилучшими пожеланиями Роберт

Ответы [ 2 ]

0 голосов
/ 30 января 2012

Добавьте overflow:auto; в CSS вашего упаковщика.

0 голосов
/ 30 января 2012

Стиль position: relative;, прикрепленный к контактному элементу, портит обертку в нижней части.Если вы удалите этот стиль, а затем переключите смещения, чтобы они стали полями, div-обертка теперь корректно переносится на все div-элементы содержимого.Я настроил пример с вашим кодом здесь: http://jsbin.com/eqecev/2/edit#preview

...