CSS scroll bar may not be visible horizontally, or there might be an empty space on the right side

I am facing an issue with displaying a horizontal scrollbar on my website when resizing the browser window. Whenever I use the {overflow-x:auto;} property, a scrollbar appears instantly even if the browser window is maximized, leaving around 100 pixels of blank space on the right side of my webpage.

body {
    padding: 0;
    margin: 0;
}
.container {
    font-size: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}
cssscrollbaroverflowpositioning

Answer №1

Feel free to try out the following

body {
 padding:0;
 margin:0;
 }
 .wrapper {
 font-size: 0;
 height: 100%;
 width: 100%;
 position: fixed;
 top: 0px;
 bottom: 0;
 overflow-y:scroll;
 margin-right: -10px;
 overflow-x:hidden;
 } `

If you encounter any further difficulties, please provide a fiddle link for me to inspect and offer a more precise solution.

Answer №2

If you're looking to display scrollbars only when necessary, then the solution lies in using overflow:auto. For more details, you can check out this resource.

The page's layout appears jumbled, so I won't delve into restructuring it. Instead, I'll share how I managed to make the horizontal bar visible.

The issue lies within the child elements of div#navbar and your handling of margin and padding properties. To gain insight on their appropriate usage, visit this link.

The div#ctu element experiences an expansion beyond its intended dimensions due to the active margin-left property.

#ctu{
    margin-left:20px --> padding-left:20px;
}
#ft{
    position:absolute; ---> position:relative;
    padding-left:10px --> padding-left:0px;
}
.container{
     overflow-y: scroll;  ---> overflow-y:auto;
     overflow-x: hidden !important; overflow-y:auto;
  //OR
  overflow:auto;
}

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

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

At first, I posed this Question and developed my own plugin to accomplish the task. However, I am encountering an unusual CSS issue with the table. Once I applied the plugin, the borders of table cells became disorganized. Here is a jsFiddle showcasing ...

javascriptjqueryhtmlcss

The width of the menubar dynamically adjusts upon mouse hover using CSS

I encountered a problem with my menu and submenu. When I hover over the list elements in the main menu, the width of the menu items changes abruptly which looks confusing. I tried fixing the width, but then there is too much space between the menu items. ...

css

Modify the height using JavaScript and then revert back to the initial CSS height

Looking for assistance with a JavaScript issue that I'm currently facing. Q1: Javascript Function to Return Image Height and Margin My website layout consists of a horizontal scroll of smaller images arranged in a grid, each with different height pe ...

javascriptjqueryhtmlcssheight

Adjust the div's width dynamically based on its content

I've spent a lot of time reading through the questions and answers on this site, but I still can't figure out why my container won't allow horizontal scrolling for my smaller divs. CSS #theLoopTasksLabels { width:90%; height:90px; ...

htmlcss

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...

htmlcssresponsive-designhidden

What is preventing the navbar from appearing on top of everything else?

I'm currently facing an issue with my website where the navbar at the top is not displaying above all other content as expected. Despite trying various approaches such as adjusting the z-index and setting absolute positioning, the navbar still remains ...

htmlcssbootstrap-4

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

javascripthtmlcssajax

To replace basic SVG icons upon clicking with the use of HTML, CSS, and jQuery - here's how!

I have a simple question about inline SVG icons and how to handle them in HTML, CSS, and jQuery. Despite reading numerous resources, I still struggle with implementing the functionality where clicking on one icon changes it to another. My objective: To to ...

jqueryhtmlcsssvgicons

Concealing the Placeholder of Div Elements in TinyMCE

I've incorporated TinyMCE into my custom TextBox and TextArea, but I'm struggling to display a placeholder within these elements. Initially, I attempted to implement a placeholder, which worked when TinyMCE was inactive. However, once activated, ...

javascriptjqueryhtmlcsstinymce

Customizing a Bootstrap tooltip balloon to align perfectly with just an outline

In an effort to create a custom tooltip balloon, I have decided to override some of the default Bootstrap styles in my project. Here is the CSS code I am using: /*overriding bootstrap*/ .tooltip-inner { border: 1px solid #0ad; background: #FFFF ...

htmlcsstwitter-bootstraptwitter-bootstrap-tooltip

Upon its second use, Ajax is loaded with cached data

Imagine a table with multiple rows, each row containing a SHOW button that reveals hidden content when clicked. The hidden div (with the classname "Content") loads the content of a second page using ajax and the id of the corresponding table row. However, ...

javascriptphpjqueryhtmlcss

At what point will the browser display changes made to css using jQuery?

When I run my JavaScript code in Firebug, it looks like this: tr=$(this).parent('tr'); tr.find('.img-delete').css('display','block'); However, I am unable to see the change reflected on the browser. Is there a wa ...

jquerycss

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI

import React from 'react'; import { makeStyles, Typography, Grid } from '@material-ui/core'; const styles = makeStyles((theme) => ({ root: {}, textStyle: { fontFamily: 'brandon-grotesque-black', tex ...

cssmaterial-uihovermaterial-designstyling

I am looking to reposition the navbar span tag so that it appears beneath the icon, utilizing both HTML and CSS

I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to ...

htmlcss

Maintain the aspect ratio of an element within a flex container

While there are numerous discussions on aspect ratio, I haven't come across a solution that fits my specific issue. My dilemma is this: I am looking to create a div with a perfect square aspect ratio within a flex parent set at 100% height. Below i ...

htmlcssflexboxaspect-ratio

Basic CSS element placement

Visit my website here. There is a black video box under the product image that I want to align to the left. I tried to adjust the CSS but couldn't find anything causing the issue. When I move the video box above the Facebook button and align it to t ...

csscss-float

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

The issue with Bootstrap 4 toggle not correctly hiding the following div

I am trying to hide one div when the other div is displayed using Bootstrap code. However, both divs are currently displaying and my code is not working as intended. If anyone can provide assistance, it would be greatly appreciated. <link rel="st ...

javascripthtmljquerycssbootstrap-4

react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, ...

htmlcssreactjsimageslider

A set of four responsive divs arranged vertically

Confession time... I'm facing a challenge with this task... I'm attempting to create a responsive page with 4 stacked divs. Here are the guidelines for each div: The header div: The text should be at the bottom, serving as a slogan placed clo ...

htmlcss