Gentle Joseph Gentle Joseph - 5 months ago 15
CSS Question

css class being applied to entire page instead of that particular div

I have the following HTML:

<!DOCTYPE html>
<head>
<title></title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/animate.css' %}" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bodyback">
<div class="col-md-12" align="center" style="height:100%">
<a href="{% url 'home' %}">
<img style="margin-top: 20px;"
class="h-logo animated fadeInDown" src="{% static 'portfolio/img/hero.png' %}"
width="180" height="180" alt="">
</a>
<br>
<section id="hi">
<div class="container animated fadeInUp" align="center">
<h2 style="color:#45b29a;" align="center">Hi.</h2>
<p class="p_class" align="center">I'm Gentle Joseph, <br>a 24 year old web designer/developer from Singapore.<br> I have a passion for web design and love to create for web and mobile devices.</p>
</div>
</section>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<br><br><br><br><br><br><br><br>
<section>
<div>
<h1 style="color:#45b29a;" align="center">What I can do.</h1>
<br><br>
<table>
<tr>
<td align="right" width="50%">
<img
class="h-logo animated fadeIn"
src="{% static 'portfolio/img/design.gif' %}"
width="200" height="200" alt=""></a>
</td>
<td align="center" width="50%"><h3>Design what you want.</h3><br>
<p class="p_class"> I like to keep it simple. My goals are to focus on<br> typography, content and conveying the message that you want to send.</p>
</td>
</tr>
<tr>
<td align="center" width="50%"><h3>Develop what you need.</h3><br>
<p class="p_class"> I'm a developer, so I know how to create your<br> website to run across devices using the latest<br> technologies available.</p>
</td>
<td align="left" width="50%">
<img
class="h-logo animated fadeIn"
src="{% static 'portfolio/img/develop.gif' %}"
width="100" height="100" alt=""></a>
</td>
</tr>
</table>
</div>
</section>
<br><br><br><br><br>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
</div><br>
</body>
<div align="center" class="more_about">
<a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
<footer>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12" align="right" style="margin-top: 6px;">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</footer>
</html>


And my CSS:

.more_about {
background-color: red;

}


Please ignore all the classes i mentioned in my HTML, because my CSS doesn't have those classes. But i dont know why when i load the page instead of the
div
where i mentioned my class, the entire page getting background red. Any idea why guys? Thanks in advance.

Answer

Please correct the following mistakes in your code and it will fix the issue

1) You have closed your body tag before that div having class more_about Body tag should always be closed in the end below the footer.

2) You need to add div with class clearfix as shown below just before your div with class .more_about to clear all the float applied to the upper divs.

<div class="clearfix"></div> <!-- this will clear all the  floats -->
<div align="center" class="more_about">
    <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>