0

I need to place with some motto next to paragraph in article.

HTML code like:

jan
  • 43
  • 6
  • You don't need `display: block` when you use float. – Oriol Mar 07 '15 at 15:57
  • Possible duplicate of [HTML5 best practices; section/header/aside/article elements](http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements) – jan Mar 24 '17 at 12:36

3 Answers3

0

I reviewed your images and it appears it is a matter of the order of your elements. You should place your tag above the block to keep it above the running paragraphs.

If you want to force the top position you can use 

position:absolute; 
right:0;
margin: auto;

you can use a negative or positive margin of the top to push the element up or down keeping it relative to the placement in the DOM. This would be to avoid fixed pixel positioning.

eyegropram
  • 672
  • 4
  • 11
0

One simply solution is move the aside to the top, just next to the img like this:

<section>
  <header>..</header>
  <img ..>
  <aside>...</aside>
  <article>
    <p> ..</p>
    <p> ..</p>
    <p> ..</p>
  </article> 
</section>

Demo http://jsfiddle.net/wa0Lcad3/

If you need aside appears in the middle of the paragraphs, you should move it into them.

Stickers
  • 75,527
  • 23
  • 147
  • 186
0
<section>
<header>..</header>
<img ..>
<aside>...</aside>
<p> ..</p>
<p> ..</p>
<p> ..</p>
</section>

Css for this

section
{
   white-space: normal;
   display: block;
   width: 100%;
}

img
{
  float: left;
  padding-right: 10px;
  display: inline-block;
  line-height: 24px;
 }

 aside
 {
   float: right;
   padding-left: 10px;
 }
Ibrahim Badusha
  • 152
  • 5