CODEWITHSUNDEEP
html
rindel
rindel

Reputation: 67

Side by side html containers

I can't seem to get my home page adjacent to the navbar on the left side first column. I've created a home page which is under the navbar section but should be on the right of it. I've tried adding a container but that didn't work. Any advise on how I can do that? The output should be navbar on left side and content on the right side.

HOME PAGE

{% extends 'layout.html' %}

{% block body %}
    <div class="jumbotron text-center">
        <h1>Welcome To myStocks Page</h1>
        <p class="lead">This application is built on the Python Flask framework</p>
    </div>  
{% endblock %}

LAYOUT

<!doctype html>

<html>
    <head>
        <meta charset="utf-8">

        <title>Stocks</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"stylesheet" 

    </head>

    <body>
        {% include 'includes/_dashboard.html' %}
        <div class="container">{% block body %}{% endblock %}</div>


        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>

enter image description here

Upvotes: 2

Views: 533

Answers (2)

cssyphus
cssyphus

Reputation: 40038

You might be under the misapprehension that the order of the elements will determine whether they are displayed to the left or right. This is not always the case.

Also, Includes are bit tricky, because you don't really see the full code in one place. Either you must mentally imagine it, or you can temporarily stick the code all together, and then break it back apart (into includes) later on. That last method might be a good idea for you as you are building the page. It might take less time to build it, then divide it, than to troubleshoot as you go.

What I am saying is that this:

    {% include 'includes/_dashboard.html' %}
    <div class="container">{% block body %}{% endblock %}</div>

does not put the dashboard on the left. The css is what puts the dashboard on the left.

It looks like you are using bootstrap with your flask project, so perhaps you should review a few bootstrap tutorials on building a page with a left-side navigation dashboard - there are many to choose from, just google. Here's one.

My suggestion, though, is to build your flask/jinja template as a single template page, then break it up later. Or at least do the basic scaffolding first, then break it up as you fine-tune it.

Flexbox Flexbox Flexbox...

Bootstrap4 uses flexbox, which is amazing for layout. In fact, it is so important that the core difference between Bootstrap3 and Bootstrap4 was moving from floats to flexbox for layout. If you invest 30 mins into learning it, you will be so impressed that you will want to buy yourself a beer for having done so.

Here is a great tutorial on using flexbox. And here is a good flexbox cheat sheet.

CSSGrid

Just as flexbox comes along, so does CSS Grid - another amazing layout tool (but a bit more involved to learn - and subsequently also a bit more powerful). But you will also find CSS Grid to be useful to you. In fact, start here.

Upvotes: 1

Ignacio Mart&#237;nez
Ignacio Mart&#237;nez

Reputation: 891

There are several ways to align your containers with CSS. (float, position, grid, flex, etc) The easiest way prob will be to add float: left to both: your left menu container and your jumbotron. Nevertheless you should consider to structure your DOM with special care thinking in responsiveness, and future features that will be added.

Upvotes: 0

Related Questions