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

Question

У меня проблема. В следующей разметке есть вспомогательный элемент, который содержит дополнительную информацию для пользователя, которую я хотел бы отобразить, как показано на прикрепленном изображении (плавающее справа).

<section> 
    <h2>site title</h2> 
    <p>that's the site's main content</p> 
    <aside> 
     <h3>other stuff</h3> 
     <div>cloud tag</div> 
    </aside> 
</section> 

Однако я не хочу размещать элемент в стороне перед элементом h2 и просто плавать по нему. Я знаю, что это сработает, но как-то мне это показалось неправильным. Можно сказать, что поисковые системы знают, что это менее важный контент, поскольку он содержится в стороннем элементе.

Но мне также хотелось бы, чтобы элемент в стороне-стороне, когда ширина страницы уменьшена (например, более мелкие устройства), элемент в стороне остается НИЖЕ основного содержимого.

Итак, мой вопрос: есть ли возможность поплавать в сторону-элемент, как показано на рисунке, без манипулирования разметкой-порядком (добавление помощи div's в порядке, я думаю).

Спасибо, с нетерпением жду.

Answer 1

Вам нужно обернуть основное содержание в DIV, а затем добавить float: left к обеим основным ДИВАМ и вашему в стороне элемента. Затем просто используйте свойство margin, чтобы разместить их соответствующим образом.

HTML

<section> 
    <div class="main"> 
     <h2>site title</h2> 
     <p>that's the site's main content</p> 
    </div> 
    <aside> 
     <h3>other stuff</h3> 
     <div>cloud tag</div> 
    </aside> 
</section> 

CSS

.main { 
    float: left; 
} 
aside { 
    float: left; 
} 

См DEMO.