Here is a picture

snapshot

you need to make three text, as in the picture, here is html

<html> <link rel = 'stylesheet' type='text/css' href= 'style.css'> <p id= 'left_text'>Ut Enim Ad Minima</p> <p id= 'middle_text'>Voluptatem Doleque</p> <p id= 'right_text'> Lorem Ipsum Dolor</p> </html>

Here is the CSS

 #left_text { color: #728461; font-family: Verdana; font-size: 18px; font-weight: normal; margin: 152px; } #middle_text { color: #728461; font-family: Verdana; font-size: 18px; font-weight: normal; margin: 40px; } #right_text { color: #728461; font-family: Verdana; font-size: 18px; font-weight: normal; margin: 40px; }

Does not exceed. That's even when I write in HTML

 <html> <p id = 'a'>asdasdasdasd</p> <p id = 'b'>asdasdasdasdad</p> <p id = 'c'>asdasdasdasdadasd</p> </html>

The texts are not in one line, and with a div - the same. How to proceed? Thank.

  • @koko, To format the code, select it with the mouse and click on the button 101010 of the editor. - Nicolas Chabanovsky ♦
  • one
    1. replace <p> with <div> 2. use float: left; 3. Use margin-left instead of margin - RedMonkey
  • +1, only the first is not necessary, because both are block elements. And instead of margin'a, better padding, fewer problems with cross-browser compatibility. - invincible
  • it's just somehow illogical to put paragraphs here, so I'm for divas - RedMonkey
  • I also often use divs out of habit, even where it is more correct to use paragraphs, although, I repeat, there is no fundamental difference in them except the built-in formatting by browsers. IMHO, I can be wrong. - invincible

3 answers 3

Well, as an option:

 #left_text, #middle_text, #right_text{ float:left; color: #728461; font-family: Verdana; font-size: 18px; font-weight: normal; } #middle_text { padding-left: 40px; padding-right: 40px; } 

     .flex { display: flex; justify-content: space-between; } 
     <div class="flex"> <p>Ut Enim Ad Minima</p> <p>Voluptatem Doleque</p> <p>Lorem Ipsum Dolor</p> </div>

      It is best to use the flex and the justify-content: space-between property for this.