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!
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>