Position element in column

Question

This question has already been solved over here:

How to align 3 divs (left/center/right) inside another div?

I am trying to position some text in column order, I tried to search, and it is showing to use float, however, if I do that, it messes up the other elements

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: white;
        font-family: arial black;
        font-weight: 900;
        background-color: cornflowerblue;
        padding: 20px;
        text-align: center;
        font-size: 40px;
      }
      * {
          padding: 0 2%;
          color: #2e3e50;
          font-family: sans-serif
      }
      .description {
        color: gray;
        padding: 15px;
        margin: 5px;
        text-align: center;
        border: 1px solid red;
        font-size: 18px;
      }
      h2, h3 {
        text-align: center;
      }
      .ingredients {
        // float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
      }
    </style>
  </head>
  <body>
    <a href="/">Back To Recipe List</a>
    <h1>{{ template_recipe | title }}</h1>
    {% if template_description %}
      <p class="description">{{ template_description }}</p>
    {%else%}
      <!--<p>A {{ template_recipe }} recipe.</p> --> 
    {% endif %}
    <h3>Ingredients - {{ template_ingredients | length}}</h3>
      <!-- Implement a for loop to iterate through 
      `template_ingredients`-->
      
      {% for ingredient in template_ingredients %}
        <p class="ingredients">{{ ingredient }}</p> 
      {% endfor%}
    <h3>Instructions</h3>
    <ul>
    {% for key, instruction in template_instructions|dictsort %}
      <!-- Add the correct dictionary element to list 
      the instructions -->
      <li>{{key}}: {{instruction}}</li>
    {% endfor %}
    </ul>
  </body>
</html>

Here is the output looks like:

text 



text 


text

The output I need:

Text           Text                  Text

Note: if I use float, it will mess up the other elements.

How to fix it Please help. Beginner CSS dude. Also i am using flask!

use flex-direction: 'row' and wrap everything inside that style — Rahman Haroon, May 27 '21 at 06:23
default flex-direction is column. Thats y its coming like that — Rahman Haroon, May 27 '21 at 06:23

Weyers de Lange · Accepted Answer · 2021-05-27T07:21:43.520

You need to add rows and column to give it structure, here is 3 equal columns i have tested the code it works perfect just copy and past.

  <!DOCTYPE html>
<html>
  <head>
    <style>
     * {
      box-sizing: border-box;
    }
    
    /* Create  equal columns that floats next to each other */
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 300px; /* Should be removed. Only for demonstration */
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
      h1 {
        color: white;
        font-family: arial black;
        font-weight: 900;
        background-color: cornflowerblue;
        padding: 20px;
        text-align: center;
        font-size: 40px;
      }
      * {
          padding: 0 2%;
          color: #2e3e50;
          font-family: sans-serif
      }
      .description {
        color: gray;
        padding: 15px;
        margin: 5px;
        text-align: center;
        border: 1px solid red;
        font-size: 18px;
      }
      h2, h3 {
        text-align: center;
      }
      .ingredients {
        // float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
      }
    </style>
  </head>
  <body>
    <a href="/">Back To Recipe List</a>
    <h1>{{ template_recipe | title }}</h1>
    {% if template_description %}
      <p class="description">{{ template_description }}</p>
    
    {%else%}
      <!--<p>A {{ template_recipe }} recipe.</p> --> 
    {% endif %}
    <h3>Ingredients - {{ template_ingredients | length}}</h3>
      <!-- Implement a for loop to iterate through 
      `template_ingredients`-->
       <div class="row">
      <div class="column" style="">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
       <div class="column" style="">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
    </div>
      {% for ingredient in template_ingredients %}
        <p class="ingredients">{{ ingredient }}</p> 
      {% endfor%}
    <h3>Instructions</h3>
    <ul>
    {% for key, instruction in template_instructions|dictsort %}
      <!-- Add the correct dictionary element to list 
      the instructions -->
      <li>{{key}}: {{instruction}}</li>
    {% endfor %}
    </ul>
  </body>
</html>

score 1 · Answer 2 · edited Jun 04 '21 at 15:33

Flex also work Good.

     <!DOCTYPE html>
          <html>
            <head>
              <style>
                .div1{
                   display: flex;
                   justify-content: space-between;
                   padding: 20px;
                }
              </style>
            </head>
            <body>
              <div class="div1">
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing eliArchitecto voluptates, voluptas tempora fuga earum quasi.</p>
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto voluptates, voluptas tempora fuga earum quasi.</p>
                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto voluptates, voluptas tempora fuga earum quasi.</p>
           </body>
         </html>

Yeah this one is nice as well.!! – CrazyKanav May 27 '21 at 07:57 — CrazyKanav, May 27 '21 at 07:57

Position element in column

This question has already been solved over here:

2 Answers2