Looking for Help with CSS Positioning
Solution to align 3 divs (left/center/right) inside another div
I am struggling to position text in a column order. I have tried using float, but it affects other elements on the page.
Below is my code snippet:
<!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>
This is the current output:
text
text
text
The desired output format:
Text Text Text
Note: Using float will impact the layout of other elements on the page.
If you have any suggestions or solutions, please help. I'm new to CSS and also using Flask!