October 25, 2024
Chicago 12, Melborne City, USA
CSS

Form inside a parent div, is outside that div


Im new programming and im building an app using python and flask with sqlalchemy(sqlite).
Im making a Flask app of a blog, that app have an add article html file where is the form to Upload the Title and body of the article to the Database.

So, what i did was making a div with the class "forms" with the form inside. Inside that form i have more divs for each row and column.

My problem is that the div "forms" is outside the form and the divs (look the image) and im wondering why since im doing the div so i can fill the form inside and making it responsive more easy.
The red border is from the "forms" div.

I have already checked the div and all is inside it.

problem image

The code (mre):

label {
    display: inline-block;
    padding: 5px;
}

.forms{
    width: 100%;
    height: 100%;
    margin-top: 10px;
    border: 2px solid salmon;
    border-radius: 4px;
    padding: 10px;

}

.col-75{
    float: left;
    width: 75%;
    margin-top: 6px;
}

input[type=text], textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    resize: vertical;
  }
  

.col-25{
    float: left;
    width: 25%;
    margin-top: 6px;
}
<div class="forms">
    <form action="{{ url_for('add_article') }}" method="post">
        <div class="row">
            <div class="col-25">
                <label for="title">Title</label>
            </div>
            <div class="col-75">
                <input type="text" id="title" name="title" placeholder="Insert your title..">
            </div>
        </div>
        <div class="row">
            <div class="col-25">
                <label for="article">Article Body</label>
            </div>
            <div class="col-75">
                <textarea name="article" id="article" placeholder="Enter the body of the article:"></textarea>
            </div>
        </div>
    </form>
</div>



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video