CSS-столбец с плавающей точкой, выходящий за нижний колонтитул - PullRequest
Новая
       18

CSS-столбец с плавающей точкой, выходящий за нижний колонтитул

1 голос
/ 22 апреля 2010

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

Я пытался поиграть со свойством clear: both;, но не могу заставить его работать .. альтернативный текст http://www.blazeware.net/examples/cssFloat/cssProblem.PNG

второй столбец имеет идентификатор column2, оба столбца используют класс column. HTML-код нижнего колонтитула имеет идентификатор footerWrapper

Оба столбца и нижний колонтитул являются div тегами.

Мой CSS (сокращенно): 

.column {
    width: 49%;
}

#column2 {
    width: 50%;
    position: absolute;
    top: 0px;
    margin-left: 50%;
    float: left;
}

#footerWrapper {
    background-color: #333333;
    border-top: 2px #FF6600 solid;
    color: #666;
}

HTML сокращенный: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <div id="mainColumns"> 
      <div id="mainContainer"><div class="mainWrapper"> 
      <h1>Title</h2> 
    </div> 
    <!-- start panels --> 
    <div class="panels"> 
      <div class="column"> 
        <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
        <div> 
          <p>content</p> 
        </div> 
      </div> 
      <div class="column" id="column2"> 
        <h2><img src="../lib/icons/newspaper.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2> 
        <div> 
          <p>content</p> 
        </div> 
        <p></p> 
        <h2><img src="../lib/icons/rainbow.png" width="16" height="16">Title</h2>
        <div> 
          <p>content</p> 
        </div> 
      </div> 
    </div> 
    <!-- end panels --> 
    <div class="mainWrapper"></p> 
      </div></div> 
      <div id="sideBar"> </div>
    </div> 
    <div id="footerWrapper"> 
      <div id="footer"> 
        <h6></h6> 
      </div> 
    </div>
  </body> 
</html>

Ответы [ 5 ]

3 голосов
/ 22 апреля 2010
  • Плавающие обе колонки
  • Удалить позицию, верх и край слева от # column2
  • Добавить clearfix CSS в таблицу стилей
  • Добавьте класс "clearfix" в ваши панели div

Clearfix заставляет div панелей обернуть оба столбца, в результате чего он становится таким же высоким, как самый длинный столбец.

2 голосов
/ 22 апреля 2010

Попробуйте добавить clear:both; к вашему #footerwrapper.

Или вы можете вручную вставить невидимый элемент, чтобы очистить поплавок, например, следующее в нижней части div.panels: 

<div style="clear:both;"></div>
2 голосов
/ 22 апреля 2010

Добавьте overflow: auto в свой контейнер.

1 голос
/ 22 марта 2011

В случае полос прокрутки вы можете добавить overflow: hidden в свой контейнер. Это позволит скрыть скрытый контент, хотя может быть лучше не скрывать важную информацию.

0 голосов
/ 22 апреля 2010

Это может быть ошибка, вызванная редактированием HTML-кода для включения в вопрос, но у вас есть несколько несовпадающих тегов <div>. Проверьте, все ли в порядке в оригинале.

...