CODEWITHSUNDEEP
htmlcss
Manh Nguyen Huu
Manh Nguyen Huu

Reputation: 381

Why does div tag not working as a wrapping block?

I use to make a card. However, the doesn't seem to offer any boundary at all and thus the entire page has the background color of body. I have tried to tinker around, changing the place of but it doesn't work. Why is this? Below is my code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/main.css">
    <title>Title</title>
</head>
<body>

<form method="POST" action="/" enctype="multipart/form-data">
    <div>{{ form.csrf_token }}</div>
    <div>{{ form.tweet_text()}}</div>
    <div>{{ form.tweet_image()}}</div>
<div>{{ form.submit()}}</div>
</form>

<div>
    <div class="card">
        <img src="http://media.npr.org/assets/news/2009/10/27/facebook1_sq-17f6f5e06d5742d8c53576f7c13d5cf7158202a9.jpg?s=16" alt="" />
        <h1>Rohit Falor</h1>
        <p>From the restored 540 K Streamliner to the all-new S65 AMG Coupe to the Concept Coupe SUV.</p>
    </div>
</div>


</body>
</html>

Here is my CSS:

body{
    background-color : azure;
    }
.card{
     height: 100px;
     width: 350px;
     border: 1px solid gray;
     box-shadow: 1px 1px 3px #888;
     border-top: 10px solid green;
     min-height: 250px;
     padding: 10px;
     margin: 10px;
     }
img{
    border-radius: 50%;
    width: 70px;
    margin: 10px;
    }

Upvotes: 0

Views: 39

Answers (1)

D.N.
D.N.

Reputation: 2170

Objects have no background-color attribute by default (the default is transparent). If you are looking to give it something other than a transparent background-color, you need to define it.

The easiest way to do this would be to set the following attribute in your .card class definition:

background-color: white;

or

background: white; /* This allows for more attributes */

Upvotes: 1

Related Questions