enter image description here

I want here that the paragraph under the picture was near the picture, not under. How to do it ?

Code:

html {width:100%; height:100%;} body { background:url(../images/goodwp1.jpg) top left repeat-x #afafaf; min-width:1200px; height:100%; } nav { text-align: center; } h1{ font-size: 50px; color:white; margin: 0px; text-align: center; display: table-cell; vertical-align: middle; } nav > ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #ddd; border-radius: 5px; } nav > ul > li { float: left; width: 150px; height: 65px; line-height: 65px; position: relative; text-transform: uppercase; font-size: 14px; color: rgba(0, 0, 0, 0.7); cursor: pointer; } nav > ul > li:hover { background: #d5d5d5; border-radius: 5px; } ul.drop-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0; } ul.drop-menu li { background: #666; color: rgba(255, 255, 255, 0.7); } ul.drop-menu li:hover { background: #606060; } ul.drop-menu li:last-child { border-radius: 0px 0px 5px 5px; } ul.drop-menu li { display: none; } li:hover > ul.drop-menu li { display: block; } 
  <body> <nav> <ul> <li>Ana Səhifə <ul class="drop-menu menu-#{i}"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> <li>seis</li> </ul> </li> <li>style 2 <ul class="drop-menu menu-#{i}"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> <li>seis</li> </ul> </li> <li>style 3 <ul class="drop-menu menu-#{i}"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> <li>seis</li> </ul> </li> <li>style 4 <ul class="drop-menu menu-#{i}"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> <li>seis</li> </ul> </li> </ul> </nav> <div style="margin:0px auto; width:55%; background:white;"> <center><div style=" margin-top:10px;width:100%; background:url(html/images/bg_slogan.gif) left top repeat-x;"> <h1 style="color:white;padding-top:10px;padding-bottom:10px;" class="animated zoomIn">EasyShop.az</h3></div></center> <div id="grid1"> <center> <h3 class="">Dəyərli zamanınıza qənaət edib sifarişləri dəqiqələr içində edin.</h3></center> <img src="images/cargo.jpg"> <p style="position:relative;text-align: center; display: table-cell; vertical-align: middle;" >Bizim fikrimizcə,ən böyük üstünlüyümüz qısa zaman içində ürəyiniz istəyən əşyanı/geyimi dəqiqələr içində sifariş edə bilməyinizdir. Qısa zamandan əlavə hər şey 100% təhlükəsiz və sərfəli qiymətə əldə olunur.Sifariş və onun necə olunması haqqda məlumatları "Sifariş" bölməsində tapa bilərsiniz.</p> </div> </div> </body> </html>

  • put it in different blocks, like here jsfiddle.net/afsgaq3o - haswell
  • I didn’t change the problem as I see the paragraph inside the div as soon as it float right out of the div - SportsTubers
  • You can customize the word - Alex78191

2 answers 2

In order for the text to flow around the image, you need to add the align attribute.

 <img src="http://s00.yaplakal.com/pics/pics_original/4/6/8/8310864.jpg" align="left" width="300px"> <p>Bizim fikrimizcə,ən böyük üstünlüyümüz qısa zaman içində ürəyiniz istəyən əşyanı/geyimi dəqiqələr içində sifariş edə bilməyinizdir. Qısa zamandan əlavə hər şey 100% təhlükəsiz və sərfəli qiymətə əldə olunur.Sifariş və onun necə olunması haqqda məlumatları "Sifariş" bölməsində tapa bilərsiniz.</p>

Example: https://jsfiddle.net/afsgaq3o/1/

  • yes the paragraph has changed the place there is a problem one picture came out of the div - SportsTubers
  • Because the picture gets the status of a floating block, to correct the error, you need to stop the calculation of the positions relative to it. Clearfix is used for this: jsfiddle.net/afsgaq3o/2 - Telion
  • Blogadare to you! Very helpful! - SportsTubers
  • In 2017, someone else uses the align attribute? - mJeevas
  • @mJeevas why not :) But yes, it would be better to do float: left. But you need to know and basic ... - Telion

float: left; for streamlined text