CSS: плавающий элемент после содержимого в коде

Question

Мне нужно иметь плавающий элемент после содержимого / текста, который должен обтекать его в моем коде по причинам SEO. Обычно поплавки делаются так:

CSS:

#menu {
float: right;
width: 180px;
padding: 10px;
background: #fcc;
margin: 0 0 15px 15px;
}

HTML:

<div id="menu">This is a right float. The long text flows around it.</div>

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

Но мне нужно иметь такой HTML-код:

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

<p id="menu">This is a right float. Because it's placed below the text in code,
it also appears that way.</p>

По сути, мне нужно, чтобы этот HTML выглядел как предыдущий пример (HTML и CSS). Как я могу это сделать?

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

Answer 1

Этот недавний вопрос может быть тем же

Обтекание текста вокруг правого плавающего столбца, где левый столбец появляется первым в html

решение включает в себя плавающую пустую "прокладку"div верно, эта прокладка находится первой в источнике, она должна иметь ширину и высоту содержимого, чтобы быть в правой части - в ссылке решение, включающее немного jQuery для получения высоты - положение фактического меню надверхняя часть плавающей проставки

пример скрипта JS, созданный по этой ссылке: ЗДЕСЬ

Answer 2

Просто добавьте следующий CSS

#content {
    float: left;
    width: 300px; /* put here the width you want */
}

демо: http://jsfiddle.net/qTDLr/1/

Редактировать: убедитесь, что сумма значений #content и #menu меньше ширины контейнера.

Answer 3

Вы можете просто использовать стол.Эта проблема CSS с «боковой панелью перед контентом» стала огромным шагом назад с точки зрения доступности.