The overflow:hidden property seems to be completely ineffective

Recently, I encountered an issue with my small HTML and CSS script. Everything was functioning properly until, out of nowhere, a scroll bar appeared on my page even though I had set overflow to hidden. I'm puzzled as to why this scroll bar is showing up. Any assistance on how to resolve this would be highly appreciated.

HTML

<!DOCTYPE HTML>
<html>

<head>
        <title>OUZO</title>
  <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="animate.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="images/logo-4.ico">

<script src="jquery.nicescroll.js">
</script>

      <script>

$(document).ready(
function() {
$("#video-wrapper").niceScroll();
$("#news-wrapper").niceScroll();
$("#games-wrapper").niceScroll();
$("#music-wrapper").niceScroll();
}
);
</script>


</head>

<body>

  <nav align="middle">

    <ul>
        <li><a href="videos.html"><img src="images/video-menu.png" class="vid" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/video-menu-hover.png'"onmouseout="this.src='images/video-menu.png';"></a></li>
        <li><a href="#"><img src="images/news-menu.png" class="news" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/news-menu-hover.png'"onmouseout="this.src='images/news-menu.png';"></a></li>
        <li><a href="#"><img src="images/logo.png" class="home" style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo.png';"></a></li>
        <li><a href="#"><img src="images/games-menu.png" class="games" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black;border-left:8px solid black;" onmouseover="this.src='images/games-menu-hover.png'"onmouseout="this.src='images/games-menu.png';"></a></li>
        <li><a href="#"><img src="images/music-menu.png" class="music" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black; border-left:8px solid black;" onmouseover="this.src='images/music-menu-hover.png'"onmouseout="this.src='images/music-menu.png';"></a></li>
    </ul>



</nav>


  <div class="left-border"></div>
<div class="right-border"></div>

<div class="container">

  <div class="content-container">

    </div>
  <div class="content-container">

      </div>
  <div class="content-container">

    </div>
  <div class="content-container">

  </div>




<footer>
<img src="images/logo-footer.png"  style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo-footer.png';">


</footer>

</body>


</html>

CSS

    html, body{

height: 100%;
overflow: hidden;
}

li {

display: inline;
margin-right: .75em;
padding: 2px;
z-index: 0;

}

ul {
position: fixed;
left: 0;
right: 0;;
margin: 0;
padding: 0;
top: 0;
border-bottom: 8px solid black;
border-width: 100%;
background-color: #d8d8d8;
z-index: 0;
}

nav {

margin-top: 4%;
}

a {
font-size: 15px;
color: black;
text-decoration: inherit;
}

.left-border {
position: fixed;
background-color: #d8d8d8;
height: 100%;
width: 10%;
bottom: 0;
left:0; 
z-index: -1;


}

.right-border {
position: fixed;
background-color: #d8d8d8;
height: 100%;
width: 10%;
right: 0;
bottom: 0;
z-index: -1;

}

.container {
width: 700px;
height: 680px;
margin-left: 22%;
padding: 0;
margin-top: 7.5%;
background-color: red;


}

.content-container {
float: left;
margin: 2%;
padding: 8.3%;
padding-left: 9%;
width: 200px;
height: 200px;
background-color: #d8d8d8;
z-index: 1;
}

footer{
position: fixed;
bottom: 0;
left: 0;
height:10%;
width:100%;
border-top: 8px solid black;
background-color: #d8d8d8;
z-index: 1;

}

footer img{
position: fixed;
bottom: 0.5%;
left: 45%;
z-index: 1;

}

@font-face {
font-family: Font;
src: url('fonts/font.woff') format('woff'),
url('fonts/font.woff');
}

Answer №1

It appears that your div container is not properly closed.

<div class="container">
   <div class="content-container">
   </div>
   <div class="content-container">
   </div>
   <div class="content-container">
   </div>
   <div class="content-container">
   </div>

Please add the following line to properly close the div container:

</div>

Answer №2

<div class="container">

  <div class="content-container">

    </div>
  <div class="content-container">

      </div>
  <div class="content-container">

    </div>
  <div class="content-container">

  </div>

</div> <!-- Remember to include this closing div tag -->

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

Is there a way to convert basic less code into CSS using VS2012 and Web Essentials?

I'm encountering an issue with the following less code: .aa { > { li { color: red;} } } After running this in Visual Studio 2012 with the latest web essentials, I am getting a compiler error on line 2. Is this really correct? As f ...

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

Shiny Chrome, Flexible Flexbox, and plump div elements

Looking to enhance my understanding of flexbox. Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox. Any suggestions on how to fix this for Chrome? .child ...

What could be causing the Material AngularJS (CSS) on my website to not function properly, unlike the demo that was

I am completely new to AngularJS and I want to incorporate the material design version of AngularJS for developing a form. I followed the beginner's guide and attempted to create something, but it didn't turn out like the one on the website. So, ...

Adjusting the target of the anchor dynamically

I have a WordPress theme with a built-in widget that allows you to insert social media links into sidebars or headers. All the social media links are contained within a div with a unique class called social-links. I want to add target="_blank" to all anc ...

Delete a specific character sequence from a PHP form before storing it in a MySQL database

My Objective: I aim to utilize a straightforward PHP form to transfer data to a MySQL database. However, in cases where the input includes a specific string, I intend to eliminate it before storing it in the MySQL database. For instance: if the input ...

Master the art of filtering rows in an HTML table based on a select option when the mouse is clicked

I am trying to create a table that displays only the rows selected in a dropdown menu. Here is an example: If "All" is selected, the table should display all rows. If "2017" is selected, the table should display only the rows that have "2017" in the sec ...

Having trouble with my PHP index not properly redirecting to the dashboard file after logging in

I have created a login form and implemented some functionalities. One of the key features is redirecting to the dashboard file after successful password validation. I attempted to troubleshoot using chatgpt, but the issue persists. I am reaching out for as ...

Selecting a filter for an array of objects

I'm struggling to implement a search feature in my mat-select DropDown. The existing options I've found online aren't quite working for me due to the object array I am passing to the Dropdown. Any assistance or guidance on this matter would ...

Acquiring a hyperlink using a regular expression from the <a href> tag

Currently utilizing JMeter and in need of extracting a link from the <a href> tag below: <a href="/i/info/14259.html" class="ogrLink">Department page</a> The desired regular expression for obtaining this link is: /i/info/14259.html An ...

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has ...

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

I prefer to avoid generating the document structure while parsing with JSOUP

Utilizing the Jsoup API to parse a section of HTML using the Jsoup.parse() method. However, during parsing, it includes the document structure in the HTML content. For Instance: <p><a href="some link">some link data</a> Some paragraph c ...

HTML text-indent is a way to add extra space to

I cannot understand why my text is not indenting properly. At the very bottom left corner, the "Educational Specifications" text is enclosed within a p element as follows: <p style="text-indent: 3em">Educational Specifications</p> Why doesn& ...

Datetimepicker cannot be displayed on this bootstrap version

I am looking to implement a datetime picker for a textbox, but I suspect that I am missing some necessary Bootstrap links. Could someone please point them out for me? Thank you in advance. <div class="form-group row align-items-center justify-conten ...

Table borders not displaying properly in Chrome when cells are hidden

I'm dealing with a peculiar issue regarding the display of borders in Chrome when individual cells are hidden within an HTML table. The borders disappear, despite being defined for the row and table elements. Does anyone have experience with this spec ...

Swap out the content within the selected element

Let's imagine we have the following shopping list: export default { data() { return { items: { Apple, Orange, Appricot } } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js" ...

What is the best way to display a date picker from a different page as a pop-up when a button is clicked on the current

Chapter One <button class="btn btn-outline-primary btn-sm btn-block " >Place order</button> Chapter Two <button class="simplepicker-btn" >Show Date Picker</button> > <script> > let simplepicker = new SimpleP ...

The ckeditor vanishes upon refreshing the div element

I have created two pages named openclosediv.php and content.php. The openclosediv.php page contains a list of records and a button that can show/hide the div, bringing in the content from content.php. However, I am facing an issue where the CKEditor in the ...