CODEWITHSUNDEEP
htmlcss
anshul
anshul

Reputation: 17

Footer changes its UI when paragraphs are removed from code

I have the following code in HTML for footer.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type="text/css" href="style_testfooter.css">
</head>
<body>
<div class="footer">
  <p>hello</p>
</div>


<div class="footerdark">
    <p> hello</p>
</div>

</body>
</html>

And similarly CSS code is as follows :

.footer {
   position: relative;
   left: 0;
   bottom: 110px;
   width: 100%;
   background-color: #303740;
   color: white;
   text-align: center;
   padding: 160px 0px;
}

.footerdark {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #272d35;
   color: white;
   text-align: center;
   padding: 30px 0px;
}

When i try to remove the para tags from the html code the UI changes for the footer.what is the reason/error ?

Before removal of p tags

After removal of p tags

Upvotes: 0

Views: 33

Answers (1)

lewisnewson
lewisnewson

Reputation: 460

Your .footer class has a bottom value set. At the moment, with the p tag in place, it is changing the lower footer height enough to cover that white space. I'd recommend removing bottom: 110px.

Note: p tags are block-level elements and so they span the full width of their parent and have a set height, which effects the height of it's parent.

Upvotes: 3

Related Questions