Установка высоты родительского div мешает поплавку дочернего div - PullRequest
Новая
       14

Установка высоты родительского div мешает поплавку дочернего div

1 голос
/ 16 августа 2011

У меня проблемы с веб-страницей, которую я создаю ...

У меня есть div, который содержит все элементы на странице (точнее, все элементы между верхним и нижним колонтитулом страницы, но это не имеет значения). Высота элемента div изменяется в зависимости от содержимого, которое он содержит. Оболочка содержит один div с id = "content", который должен содержать любой контент, который я хочу отображать на странице, один div, который я использую в качестве кнопки (id = "collapse"), и один div (id = "calendar"), который создает поле, которое будет содержать список событий.

CSS: 

#body {
    height:500px;
    min-height:250px;
    width:100%;
    background:#fc0;
    padding-bottom:100%;
    margin-bottom:-100%;
}
#calendar {
    float:right;
    height:100%;
    width:20%;
    border-left:10px solid #678DC0;
    background:#b0c4de;
    padding-bottom:100%;
    margin-bottom:-100%;
}
#collapse {
    float:right;
    margin-top:10px;
    text-align:left;
    padding-left:10px;
    padding-top:20px;
    padding-bottom:20px;
    background:#678DC0;
    border-top-left-radius:25px;
    -moz-border-top-left-radius:25px; /* Firefox 3.6 and earlier */
    border-bottom-left-radius:25px;
    -moz-border-bottom-left-radius:25px;
}
#content {
    height:auto;
    width:100%;
    background:#b0c4de;
    text-align:center;
    padding:50px;
}

HTML: 

<div id="body">
<div id="calendar"></div>
<div id="collapse">>></div>
<div id="content"></div>
</div>

Теперь это моя проблема: если я установлю #body height: auto; float #collapse div и ширина #content div действуют странно. #collapse div плавает до самого края #body div вместо остановки, когда он попадает в #calendar div. То же самое с #content div. Он простирается до края #body, а не до # календаря.

Надеюсь, я дал вам правильную формулировку. Есть вопросы о чем я прошу?

Есть идеи?

1 Ответ

1 голос
/ 16 августа 2011

Как прокомментировал Райан, вы можете использовать чистый стиль для правильного позиционирования ваших плавающих элементов.Я настроил здесь тестовую страницу: http://jsbin.com/apinuj/2/edit#html,live,, демонстрирующую, как использовать исправление clear в вашем html, чтобы div тела был правильно выровнен при установке на height: auto.

...