The bottom border of the HTML header does not properly wrap around the Table of Contents (ToC), although the text within the header does. What steps

I have created a Table of Content (ToC) using a Div element and styled it with the following HTML and CSS:

h3.articletitle {
    font-weight: bold;
    font-size: 30px;
    border-bottom: 1px solid #4F120B;
}

h4.articlesubtitle {
    font-weight: bold;
    font-size: 22px;
    border-bottom: 1px solid #4F120B;
}

h5.articlesubtitle {
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #4F120B;
}

#toc_container {
    background: rgba(92, 9, 0, 0.14);
    border: 1px solid #4F120B;
    display: block;
    font-size: 90%;
    margin-bottom: 1em;
    margin-right: 1em;
    padding: 20px;
    width: auto;
}
<div class="book">
<h3 class="articletitle">Title</h3>
<article>
<div style="float: left; margin-left: auto;" id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a  href="#Scociety">Society</a></li>
<ul>
<li><a href="#ArtHistory">Art</a></li>
<li><a href="#PopCulture">Pop Culture</a></li>
<li><a href="#HighCulture">High Culture</a></li>
<li><a href="#CommunicationAndTheSpreadOfIdeas">Communication And The Spread Of Ideas</a></li>
<li><a href="#Holidays">Holidays</a></li>
<li><a href="#GenderAndGenderRoles">Gender and Gender Roles</a></li>
<li><a href="#SubculturesAndAlternativeLifestyles">Subcultures and Alternative Lifestyles</a></li>
<li><a href="#UniversalFears">Universal Fears</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4 class="articlesubtitle" id="Society">Society</h4>
<h5 class="articlesubtitle" id="ArtHistory">Art</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

The issue I am facing is with the borders under the headers extending into the ToC's div. How can I make them wrap around the text? I have tried placing them in separate divs and adjusting the width using percentages, but it only works when in fullscreen mode. When resizing, the borders end up overlapping the ToC.

This is my first experience with web design, so please explain any solutions in simple terms.

htmlcss

Answer №1

By adding the following CSS rule:

.articlesubtitle {
    overflow: hidden;
}

The issue is resolved.

h3.articletitle {
    font-weight: bold;
    font-size: 30px;
    border-bottom: 1px solid #4F120B;
}

h4.articlesubtitle {
    font-weight: bold;
    font-size: 22px;
    border-bottom: 1px solid #4F120B;
}

h5.articlesubtitle {
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #4F120B;
}

.articlesubtitle {
    overflow: hidden;
}

#toc_container {
    background: rgba(92, 9, 0, 0.14);
    border: 1px solid #4F120B;
    display: block;
    font-size: 90%;
    margin-bottom: 1em;
    margin-right: 1em;
    padding: 20px;
    width: auto;
}
<div class="book">
<h3 class="articletitle">Title</h3>
<article>
<div style="float: left; margin-left: auto;" id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a  href="#Scociety">Scociety</a></li>
<ul>
<li><a href="#ArtHistory">Art</a></li>
<li><a href="#PopCulture">Pop Culture</a></li>
<li><a href="#HighCulture">High Culture</a></li>
<li><a href="#CommunicationAndTheSpreadOfIdeas">Communication And The Spread Of Ideas</a></li>
<li><a href="#Holidays">Holidays</a></li>
<li><a href="#GenderAndGenderRoles">Gender and Gender Roles</a></li>
<li><a href="#SubculturesAndAlternativeLifestyles">Subcultures and Alternative Lifestyles</a></li>
<li><a href="#UniversalFears">Universal Fears</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4 class="articlesubtitle" id="Scociety">Scociety</h4>
<h5 class="articlesubtitle" id="ArtHistory">Art</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

Answer №2

Implementing the CSS property "overflow: hidden;" for headers produced the desired outcome as anticipated.

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 the best way to customize the appearance of a form element within an angular-schema-form schema without affecting the overall

Currently, I am in the process of constructing a form using the incredible angular-schema-form. Creating the form schema object has been a success so far. My goal is to configure all the form components within the schema using the x-schema-form property in ...

cssangularjsionic-frameworkangular-schema-form

What is preventing me from binding ng-click to my element?

I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...

javascriptjqueryhtmlangularjsangularjs-directive

Unable to see background image inside div

Why is the background image not showing up in the left column? I've applied the CSS background-image to .left but it's still not working. Any suggestions on what might be causing this issue? It seems like a small problem, but it's really bot ...

htmlcss

Adjust the navigation height to be proportional to the main content size

I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success: My goal is for the green menu section to extend down to the footer. Here is the HTML code: <div ...

htmlcss

Highlighting of Vue directives in HTML within WebStorm

Can the Vue attributes and directives be highlighted? Including those in quotes. ...

htmlsyntaxvue.jswebstormsyntax-highlighting

CSRF token not recognized. Request cancelled. Even after including the CSRF token {% csrf_token %}, the error persists

I'm encountering an issue with the CSRF token being incorrect or invalid. I have included the {% csrf_token %} above my form, but I am still facing this problem. Can anyone assist me with this? Here is a snippet of my HTML file: <h4>regist ...

pythonhtmldjangoformscsrf-token

Updating HTML input fields via AJAXIncorporating AJAX

Let's take a look at our database: ID Name Price 1 product1 200 2 product2 300 3 product3 400 Now, onto my form: <form action="test.php" method="post" /> <input type="text" name="search" id="search" placeholder="enter ...

phpjqueryhtmlmysqlajax

What is the best way to make an element "jump to the top" when the parent element has reached its maximum height?

I have a parent div containing 6 child divs. The height of the internal divs changes dynamically based on the data. The outer div has a fixed height set. I want the internal divs to move to a new column inside the parent div when they no longer fit in term ...

htmljquerycss

How can I implement a jQuery slide down effect for a specific individual instance?

Whenever I click on the "Share your thoughts" button, the comments block slides down for every section instead of just the particular section I clicked on. Is there a way to make it so that only a single block slides down when the button is clicked, regard ...

javascriptjqueryhtmlcss

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Trying to set a timer for my little game, but facing some difficulties. The timer causes the balance to randomly increase from 0 to 13000 + some extra amount. <script> var coins = 0; var speed = 1; </script> <center> <h4> ...

javascripthtmlcss

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

Issues with Angular ngroute: controllers are not functioning properly

In order to route my application with different themes on the same page, I plan to utilize the ngroute module. Here's an example of how I intend to achieve this: <html> <head> <title>Angular JS Views</title> ...

javascripthtmlangularjsngrouteroute-provider

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

My form contains an input with a dropdown, where I display JSON data like this: { "title": "Parent #1", "child" : [ {"title": "Child ##1"}, {"title": "Child ##2"}, {"title": "Child ##3"}, {"title": "Child ##4"} ...

javascripthtmlangularjs

The CSS styling for an active link is not functioning correctly on a single page when using sections

I recently received a zip file containing a template purchased from themeforest, with a request to make modifications. The template includes a horizontal navigation bar with links to various sections on the page. In the original template, when you click on ...

htmlcss

Using PHP to calculate the total number of records within an HTML document

I am currently working on a PHP script to establish a connection with my MySQL database in order to retrieve the total number of users registered on my forum by counting the records in the table. The PHP script should display the total count above the sec ...

javascriptphphtmlmysql

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

javascriptjqueryhtmlajaxdom

Unable to apply 3rd condition with ngClass into effect

I've been attempting to incorporate a third condition into my ngClass. Initially, I managed to get two classes working in my ngClass to change the row colors alternately. [ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}" Now, I'm trying to introdu ...

cssangular

Content will be displayed below the background image

Help Needed: Content Going Over Background Image Hey there! I'm having a bit of trouble with my home page design. I have a full-width background image, but the content isn't displaying below it like I want it to. Instead, it's showing over ...

htmlcssflexbox

HTML Data Service for WCF

Is there a way for users to easily display a list of their publications on their websites? I'm considering pulling data from a SSRS database and using a WCF Data Service. However, the WCF Data Service only outputs ATOM or JSON data. Is this the right ...

htmlwcf

Can the default DOM structure of a Jquery Data Table be customized to fit specific needs?

I have incorporated a Jquery Data Table Plugin that can be found at http://datatables.net/api. This plugin comes with its own search box, which is automatically added to the page when enabled. The search box is nested within its own div structure like this ...

jqueryhtmlcssdatatable