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

Bring in the SCSS directory from the overarching SCSS program

I am currently working with Angular (Jhipster) in my application and I am looking to include multiple .scss files in my global.scss file. To achieve this, I have created a folder called "util" at the same level as the global.scss file and placed these .scs ...

cssangularsass

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss

An interesting quirk within CSS is that when a field is hidden, it can

I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...

cssgoogle-chrome-extension

Ways to conceal a label and the input field when a radio input is switched on

In my HTML file, I have coded an application form using CSS to style it. Some of the tags have been removed for display purposes. <label>Member</label> <input type="radio" name="Answer" value="Yes"/>Yes<br/> <input type="radio" ...

htmlcssradio-buttonlabelhide

What could be causing the submit button on this form to not be centered by this CSS?

I have been attempting to center this submit button using CSS, however, despite researching various online resources, I have not yet discovered a solution. It seems strange that such a simple task is proving to be so challenging. td.class > div { w ...

htmlcss

Set the background of the div element behind the image

I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code: <div class="row text-center about__gallery"> <div class="col-xs-12 col-sm-4"> <div cl ...

htmlcsssass

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

htmlcsshoverhtml-lists

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

htmlcssbackgroundoverlayfullscreen

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss

Should the refresh button be displayed once the animation finishes?

Can anyone provide guidance on how to write jQuery code that will reveal a hidden button after an animation is finished? The button should also be able to refresh the animation for the user to watch again. Check out this fiddle: http://jsfiddle.net/rabela ...

jquerycssanimationjquery-animate

Populate HTML Table with Array Elements

I need assistance with inserting array values into an HTML table. The table should have 5 columns and enough rows to accommodate all the information. I envision it looking like this: 1 | 2 | 3 | 4 | 5 11 | 22 | 33 | 44 | 55 111 | 222 | 333 | 444 | 555 ...

phphtmlhtml-table

The grid layout is being disrupted by a concealed input

As I work on styling my admin panels with Twitter Bootstrap, I've encountered a strange issue. Upon testing in Chrome 28 and Firefox, adding a simple hidden input seems to disrupt the grid layout. If the hidden input is moved into div.span6 or remove ...

htmlcsstwitter-bootstrapgrid

Guide to implementing a slider in HTML to adjust the size of my canvas brush

Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated! <canvas i ...

javascripthtmljquerycss

What is the best way to modify a variable in a nested element using ng-click in the parent element?

Review this code snippet: <section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false"> <div class="page-content sub-content active-section">{{activeSection}} < ...

javascripthtmlangularjs

PHP image retrieval is not functioning correctly and the image is not appearing as it

I'm facing some challenges when it comes to displaying images with PHP. I attempted to use this solution from Stack Overflow, but unfortunately, the image is still not appearing correctly. Within my PHP file that deals with the HTML layout, the code ...

phphtmlmysqlimage

Property registered in CSS dynamically

Is it possible to pass dynamic values when using the css registered property? For instance, in the code snippet below, how can I pass on the value ---numValue=35 to to{--num:}? @property --num { syntax: "<integer>"; initial-value: 0; ...

htmlcss

Determine the exact scroll position needed to reveal the element when scrolling in reverse

I'm looking for a way to make my div disappear when I scroll down and reappear immediately when I start scrolling back up. Currently, it only works when I reach a certain position instead of taking effect right away. I need assistance in calculating t ...

javascripthtmlcss

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it. To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots. The goa ...

javascripthtmlcss

Arrange a div element within another div by utilizing the fixed positioning property, while also accounting for any potential "white space

Can someone help me figure this out: I currently have this much progress: http://jsbin.com/apikiw/3/edit#preview The issue I'm facing is that I am unable to insert it between the <p /> tags due to its dynamic nature... any solutions or suggest ...

javascriptjqueryhtmlcss

Validation of forms using Javascript

I currently have an HTML form with JavaScript validation. Instead of displaying error messages in a popup using the alert command, how can I show them next to the text boxes? Here is my current code: if (document.gfiDownloadForm.txtFirstName.value == &ap ...

javascripthtmlforms