The CSS class is mistakenly being applied to the entire page instead of just the specific div it was

Here is the HTML code I am working with:

<!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>

Below is my CSS code:

.more_about {
    background-color: red;

}

I am encountering an issue where instead of applying the red background specifically to the div where the "more_about" class is assigned, the entire page is getting a red background. Could someone provide insights on why this might be happening? Thank you.

htmlcss

Answer №1

To resolve the issue, please address the following errors in your code:

1) Ensure that you close the body tag after the div with the class more_about. The body tag should always be closed below the footer.

2) Add a div with the class clearfix before the div with the class .more_about to clear any floats from upper divs. See the example code snippet below:

<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>

Answer №2

I believe this is the result you were anticipating, all you have to do is include float:left

.details_additional{
    background-color: red;
    float:left;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing my HTML from rendering on the page?

I have cross-referenced the script below with the google charts documentation available at the following link: https://developers.google.com/chart/interactive/docs/gallery/scatterchart However, it is not displaying properly. I have reviewed the code and ...

htmlgoogle-visualization

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

javascripthtmlangulartypescript

Hide the address bar in a Google Maps iFrame

After numerous attempts, I still can't seem to hide the address bar on this Google Maps iFrame. Can anyone provide a solution or workaround for this issue? I have tried using display:none; in our CSS, which successfully hides the address bar when I d ...

javascripthtmlcsswordpressiframe

Using jQuery to animate two images simultaneously in opposite directions

Trying to make two images animate using a single function. The issue is that one image needs to animate the left attribute while the other needs to animate the right. Here's what I have so far: $(document).ready(function(){ v ...

jquerycsspositioningjquery-animate

Align the user profile picture and username vertically in the header using CSS

I was able to perfectly align the header vertically until I decided to add the user's profile picture, and now I can't seem to get it right. After numerous attempts, this is what I've come up with: HTML/PHP: <ul id="right-side"> & ...

phphtmlcss

The row and col classes will only expand to the full width if they are used within form or p elements

I am facing some unusual behaviors while using Bootstrap in my current project. It seems to be the first time I have encountered such issues. Below is the HTML code snippet: <div class="row" style="background-color: blue; padding: 2rem; ...

htmlcssbootstrap-5angular-bootstrap

"Effortless CSS Formatting in VS Code - A Guide to Automatic Styling

Recently started using VS code and I'm on the lookout for a solution to automatically format CSS whenever I save my work. Strangely, my searches haven't led me to any reliable extensions or clear guides on how to achieve auto formatting in VS cod ...

cssvisual-studio-codeautoformatting

Issue with php's mysql_fetch_assoc() function

Seeking to fetch data from a function that holds my query. The retrieved data is sent back to the main page for printing using a while loop but encountering an error: Warning: mysql_fetch_assoc() expects parameter 1 to be resource, string given ...

phphtmlmysql

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

htmlcssangularangular-material

Having trouble with jQuery on my webpage

Looking for assistance with a technical issue I'm facing... I am currently working with AngularJS and have integrated jQuery into my project. However, I've encountered an issue where the jQuery code is not functioning as expected on the HTML pag ...

javascriptjqueryhtmlangularjs

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

javascriptphphtml

Python Automation: Saving Excel Files with Selenium

I'm on a mission to download an XLS file for each day of a specific month. However, when I use Chrome's developer tools to inspect the download button for the XLS file, it turns out that it's not actually a button at all. So how can I go abo ...

pythonhtmlseleniumweb-scrapingdownload

Pictures glide within containers

Hey, I'm having an issue with my images. They're not floating like they should be, even though they are centered in the div. I really want them to float and be centered. Here's the code snippet I've been working with. HTML <div cla ...

htmlcss

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascriptcssowl-carousel

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

phphtmlcsssqlphpmyadmin

What is the best way to eliminate the extra space above a span when the parent element's font size is very large?

Dealing with a situation where the parent DOM-element has a large em-value which results in all inline child elements having a significant margin above them despite their smaller font-size: Here is the source (http://jsfiddle.net/rapik/w87m7/2/): <div ...

htmlcssfont-size

Issues with align-content in Internet Explorer 11

.row { background: green; color: white; margin-top: 20px; } .col2 { border: 3px solid black; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

cssbootstrap-4flexboxinternet-explorer-11

What is the best way to perfectly align an SVG inside its container?

Is there a way to horizontally center this SVG within .svg_wrapper? .svg_wrapper { border: 1px solid grey; width: 200px; } <div class="svg_wrapper"> <svg viewBox="0 0 600 425"> <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 ...

csssvg

Tips for avoiding re-rendering during onclick event handling

let content=useRef(); let toHide=useRef(); useEffect(()=>{ content.current=document.querySelectorAll('.content'); toHide.current=document.querySelectorAll('.hide'); toHide.current?.[0].addEventListener("cli ...

htmlreactjs

Position the responsive carousel in the center

My carousel appears misaligned on smaller screens, but displays correctly on laptops and desktops. I've attached a screenshot and my CSS code below for reference. Thank you in advance! .MultiCarousel { margin-right:15px; margin-left: 15px;float: lef ...

htmlcssbootstrap-4