CODEWITHSUNDEEP
htmlcssdjango
Shaswat
Shaswat

Reputation: 39

How do I stop my css from overlapping in django?

So while rendering I'm having problem as my two of my elements are overlapping.

Image : https://i.sstatic.net/FyOF2.jpg

here's the relevant code :

    <style type="text/css">
    .box{
        position: absolute;
        left: 50px;
        width: calc(80% - 100px);
        border: 1px solid black;
        border-radius: 10px;
        padding: 5px;
        text-align: center;
    }
</style>

<h1>Post Title</h1>
<small> by dell | Posted on Nov. 7, 2020, 9:40 p.m. </small>

<br/>
<div class="box">
<p> <p>Sample Post Body</p></p>
</div>
<br/>


    <form method="POST">
        <div class="form-group">

        <input type="hidden" name="csrfmiddlewaretoken" value="zlYmcOuhui0Tv0n3vtQ8gM7AE6cvbXbZSyXwudTzEN8M30RoYNzfgHGmaKx5IhiM"><p><label for="id_body">Body:
</label> <textarea name="body" cols="40" rows="10" required id="id_body">
</textarea></p>

        <button class="btn btn-secondary"> submit comment </button>
        </div>
    </form>

I just can't seem to figure out how do I make the Post body and the Form element separate.

Upvotes: 0

Views: 824

Answers (3)

prathap sagar
prathap sagar

Reputation: 121

This worked I have added div around your form and box and separated by < br> also I remove position:absolute

<style type="text/css">
.box{

    left: 50px;
    width: calc(80% - 100px);
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
}
</style>
<h1>Post Title</h1>
<small> by dell | Posted on Nov. 7,
2020, 9:40 p.m. </small>
<br><br>
<div>
<div class="box">
<p> <p>Sample Post Body</p></p>
</div>
<br/>
</div>
<br>
<div>
<form method="POST">
    <div class="form-group">

    <input type="hidden"
name="csrfmiddlewaretoken" value="zlYmcOuhui0Tv0n3vtQ8gM7AE6cvbXbZSyXwudTzEN8M30RoYNzfgHGmaKx5IhiM"><p><label for="id_body">Body:
</label> <textarea name="body"
cols="40" rows="10" required
id="id_body"</textarea></p>
<button class="btn btn-secondary">
submit comment </button>
    </div>
</form>
</div>

Upvotes: 0

vladusatii
vladusatii

Reputation: 82

In CSS, two items must be relative to one another or put into a table to separate their positions. In your case, you have a position: absolute; that is interfering with the position: auto;. In this case, you have a few options:

  1. body { position:relative !important;display:block; }. This is for simple applications where each element needs to be separated for individuality. The !important property classifies your specification in markup as the 'leading' one.
  2. <br /> between each HTML element. This will add a line-break to the element so that they are separated relatively on your page.
  3. Put a position: relative; on each individual element. Only use position: absolute; when you need to add some sort of footer or header or shape to your div or other item. Absolute positioning doesn't change in response to the page width, so this is a big markup issue.

Hopefully this helped.

Additional Resources:

[1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -- A guide to flexbox for forms and other web design markup. It is a trending setup for positioning that not many people take advantage of.

[2] https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display -- Learn how to separate elements with block, inline, flex, inline-block, or none.

Note: This bug has nothing to do with Django.

Upvotes: 0

Zahid Wadiwale
Zahid Wadiwale

Reputation: 116

The Question as firstly nothing to do with django it's happening because position of box is absolute either remove the position: absolute; or have the form and and box class whatever its is div or or button separately in different div's and add <br> between them

Upvotes: 1

Related Questions