Как разместить текст в html с тегами div?

Этот код:Как разместить текст в html с тегами div?

<div id="columns"> 
     text 
    </div> 
    <div id="columns"> 
     text 
    </div> 
    <div id="columns"> 
     text 
    </div>

закодирован с этим CSS:

#columns { 
     width: 200px; 
     float: left; 
     margin-left: 20px; 
     margin-right: 20px; 
    }

Проблема заключается в том, что если я ставлю любой текст ниже трех столбцов, созданных, он просто добавляет еще один столбец! Я хочу, чтобы футер быть ниже этих столбцов, но я могу сделать это только до тех пор, установив это:

footer { 
    /*height: 50px;*/ 
    text-align: center; 
    position:absolute; 
    bottom:0; 
}

И это только делает страницу более, т.е. ставит огромный разрыв между этим содержанием и колонтитула. Любые решения?

Благодаря

источник

2013-09-17 Hayley van Waas

мкм, не имеет один отметил, что есть три дивы все с одинаковым идентификатором? –

Элементы перемещаются влево, делая документооборот измененным. Перед записью нижнего колонтитула необходимо сбросить поток документов. Это можно сделать, установив свойство clear:both для нижнего колонтитула (ведь сразу после завершения .columns).

Рабочий jsfiddle находится здесь.

CSS:

footer{ 
    clear: both; 
}

Предложение (выходит за рамки вопроса): Вы должны изменить id="columns" к class="columns" как в действующей HTML-разметки, идентификаторы должны быть уникальными.(Спасибо майкл)

источник

2013-09-17 05:46:23

проблема заключается в том, что один и тот же идентификатор используется для трех элементов div. Изменяя этот идентификатор на класс, код будет работать нормально, не очищая нижний колонтитул. –

изменение идентификатора на класс - отличное предложение исправить разметку (я даже не заметил этого на первый взгляд). однако это не будет фиксировать положение нижнего колонтитула, если мы не очистим поток документа. Я просто проверил быструю проверку на http://jsfiddle.net/priyaranjan/84Xvk/1/ –

вправо, имеет смысл. если вы измените идентификаторы на классы в своем ответе, у вас есть правильный –

попробовать этот

demo

CSS

*{ 
     margin:0; 
     padding:0; 
    } 
    #columns { 
      width: 200px; 
      float: left; 
      margin-left: 20px; 
      margin-right: 20px; 
     background-color:red; 


     } 
    .clearfix{ 
     clear:both; 
    } 
    footer { 
     /*height: 50px;*/ 
     text-align: center; 
     position:absolute; 
     border:1px solid red; 
    }

HTML

<div id="columns"> 
     text 
    </div> 
    <div id="columns"> 
     text 
    </div> 
    <div id="columns"> 
     text 
    </div> 
<div class="clearfix"></div> 
<footer>footer</footer>

источник

2013-09-17 05:43:01 falguni

При использовании любых перемещаемых элементов поведение по умолчанию заключается в том, что они не учитываются в отношении другого содержимого в этой области, поэтому они будут отображаться с одной стороны другого содержимого.

Конечно, если вы хотите предотвратить это, свойство clear будет по существу продолжаться ниже любых плавающих элементов на одной (или любой) стороне перед ним.

footer { 
    height: 50px; 
    clear: both; /* can also use `clear: left` here */ 
}

источник

2013-09-17 05:44:10 Nightfirecat

попробовать после removeing bottom:0; и поставить ниже HTML кода после третьей колонки

<div id='footer'> 
    <p>Footer Content</p> 
</div>

источник

2013-09-17 05:44:24

Вы должны использовать CSS ясный для вашей проблемы

как clear :both для ид/класса вы Див

источник

2013-09-17 05:45:26 Rex

текст

<div id="columns"> 
    text 
</div> 
<div id="columns"> 
    text 
</div>

<div style="clear:both"></div>
<footer>footer</footer>

источник

2013-09-17 05:55:24 user2786265

Как разместить текст в html с тегами div?

ответ

Смежные вопросы