I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image floating left outside of the container. I attempted setting the CSS position to absolute without success. Are there any other options besides separating the page from the layout.html? My goal is to retain the container.
Below is the layout.html code:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="{{url_for('static',filename ='img/favicon-32x32.png')}}" sizes="32x32" />
<title>Foodie</title>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<link rel="stylesheet" href="{{url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo"><a href="{{ url_for('home') }}">Test1</a></h1>
<ul class ="about" style= "list-style: none">
<li><a href="{{ url_for('demo') }}" target="_blank">Test2</a></li>
</ul>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
This is the home.html which includes the image meant to float left within the div id footer.
{% extends "layout.html" %}
{% block content %}
{% if error %}
<p class="flash">Error:{{ error }}
{% endif %}
<div id="home_city" class="jumbo">
<div class="search-form" align="center">
<h1> Welcome, tell us where you are from: </h1>
<form class="form-container" action="/home_city" method="post" autocomplete="on">
<input type="text" class="search-field" name="city" required placeholder="Enter your home City" />
<div class="submit-container">
<input type="submit" value="" class="submit"/>
</div>
</form>
</div>
<div align="center">
<ul id="random">
<li>#COFFEE</li>
<li>#OMG</li>
<li>#LATTE</li>
<li>#Starbucks</li>
<li>#Chocolate</li>
<li>#Yummy</li>
<li>#Lunch</li>
<li>#THATPLATE</li>
<li>#FOODIE</li>
<li>#ROOTS</li>
<li>#FINEDINING</li>
<li>#VEGLIFE</li>
<li>#NOMSNOMS</li>
<li>#Breakfast</li>
<li>#Don'tbitethehandthatfeedsyou</li>
<li>#SWEETS</li>
<li>#Tapas</li>
<li>#Rice</li>
</ul>
</div>
</div>
<div id = "footer">
<img src ="{{url_for('static',filename ='img/Powered_By_Yelp_Black 2.png')}}" alt="Powered by Yelp">
<div id="beta">
<h1>BETA</h1>
</div>
</div>
{% endblock %}
Lastly, here is the CSS file used in this project:
body {
margin: auto 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
/* The rest of the CSS styles go here */