I am super new to css, so apologize if the question is stupid. I have two components on a page, one is called .sub-list , which is a side bar that contains the names of all the groups available, the other main component is post-list, which has all the posts listing. I am really confused about all the positions option outhere. I've tried aboslute position for the two components and relative positions, but with screen decrease or increase, the display just completely falls apart.
Here is the base.html:
{% load static %}
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Nat's flower</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/reddit.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Nat's Flower</a></h1>
{% if user.is_authenticated %}
<!--<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
<a href="{% url 'subreddit_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>-->
<!--<a href="{% url 'logout' %}" class="top-menu">{{ user.username }} Sign Out</a>-->
<a href="{% url 'post_new' %}" class="top-menu">New Post</a>
<a href="{% url 'subreddit_new' %}" class="top-menu">New Group</a>
<a href="{% url 'logout' %}" class="top-menu"><span class="glyphicon glyphicon-off"></span></a>
{% else %}
<a href="{% url 'login' %}" class="top-menu"><span class="glyphicon glyphicon-lock"></span></a>
{% endif %}
</div>
<div class="content-container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
<div class="col-md-4"> <!--using bootstrap template-->
{% block sidebar %}
{% endblock %}
</div>
</div>
</div>
<div>
</div>
</body>
</html>
this is the post_list.html
{% extends 'Reddit_app/base.html' %}
{% block content %}
<div class="post-list">
{% for post in posts %}
<div class="post">
<h2>
<a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a>
{% if post.url %}
<span class="url"><a href="{{post.url}}">{{post.url}}</a>
{% endif %}
</h2>
<div class="date">
{{ post.date_created }}
{% include "Reddit_app/subs_posted.html" with post=post %}
</div>
{% if post.url %}
<a href="{{post.url}}">{{post.url}}</a>
{% endif %}
<p>{{ post.text|linebreaksbr }}</p>
{% if post.comment_count > 0 %}
<p><a href="{% url 'post_detail' pk=post.pk %}">{{ post.comment_count }} Comments</a></p>
{% endif %}
</div>
{% endfor %}
</div>
{% endblock %}
{% block sidebar %}
{% include "Reddit_app/sub_list.html" with subreddits=subreddits %}
{%endblock%}
And this is the sub-list.html (sidebar)
<div class="sub-list">
<div class="sub" id="title"><h4>Groups </h4></div>
{% for sub in subreddits %}
{% if sub.name == 'all' %}
<div class="sub-single-name"> <a href="{% url 'sub_detail' pk=sub.pk %}">{{ sub.name }}</a></div>
{% endif %}
{% endfor %}
{% for sub in subreddits %}
{% if sub.name != 'all' %}
<div class="sub-single-name">
<a href="{% url 'sub_detail' pk=sub.pk %}">{{ sub.name }}</a>
</div>
{% endif %}
{% endfor %}
</div>
question from:
https://stackoverflow.com/questions/65947692/css-on-the-relevant-position-of-two-components 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
