What could be causing my centrally-aligned divs to not scroll horizontally?

(Please note that there are no scrollbars on these divs, so scrolling to the left is not possible within the body or the divs themselves.)

The issue (shown above in FF and Opera) occurs on both the "Baroque" and "Spotlights" theme selections (refer to the links below). When you shrink the browser window to a small size (e.g. under ~900 width), the horizontal scrollbar fails to scroll to the left. While it scrolls to the right without any problem, it completely disregards if the navigation menu is pushed off the left side of the screen, making it inaccessible.

What could be causing this behavior?

Below is the relevant HTML:

<div class="center1">
<div class="center2">
  <div style="position:relative; top:180px; width:1226px;" id="containerBGimgLParent">
    <div id="containerBGimgL"></div><img src="images/skin3/dark_interface_parts5b.png">
  </div>
</div>
</div>

<div class="center1">
<div class="center2">
<div id="containerBG">
    <div id="NavMenu">
                <ul class="kwicks">
            <li id="kwick1"></li>
            <li id="kwick2"></li>
            <li id="kwick3"></li>
            <li id="kwick4"></li>
            <li id="kwick5"></li>
            <li id="kwick6"></li>
            <li id="kwick7"></li>
                </ul>
    </div>
</div>
</div>
</div>

<div id="contentdiv"></div>

... as well as the CSS:

body {
    background-image: url("../images/skin3/DIBG.png");
    background-repeat: repeat;
    font-family: "Times New Roman";
}

#NavMenu {
    float:left;
    width:170px;
    background-color: #000; 
    padding:5px; 
}

.center1 {
    position:absolute;
    right:50%;
}

.center2 {
    position:relative;
    left:50%;
}

#containerBGimgL {
    background-image:url('../images/skin3/dark_interface_parts5a.png');
    background-repeat: no-repeat;
    width:1040px;
    height:672px;
    display:inline-block;
}

#containerBG {
    width: 980px; 
    position:relative;
    top:274px;
}

#contentdiv
{
    position:absolute;
    top:320px;
    left:700px;
    width:600px;
    height:526px;

    text-align:left;

    padding: 0px 20px 0px 0px;
    background-color: #000;
    overflow-y: scroll;
    color:#fff;
}

The javascript resize function alters the dimensions of some divs, but doesn't cause this particular issue. It does not change any div's overflow property to hidden, for instance.

To see the problem firsthand, visit the following link: . (Please ensure that JavaScript is enabled as the functionality may not work without it.)

Answer №1

One alternative method for centering the main section is as follows:

  • In the .center1 class, eliminate the position and right properties.
  • In the .center2 class, remove the position and left rules.
  • Add margin: 0 auto to the #containerBG element to re-center it.

I tested this in Chrome with JavaScript enabled by resizing the window to various sizes, and the appearance remained consistent while fixing the issue you were experiencing.

I also confirmed that this solution works in Firefox after testing it.

You should now be able to remove the unnecessary <div class="center1"> and <div class="center2"> elements.

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

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...

Place a <ul> list in the center

I've hit a roadblock trying to find a solution for this issue. Nothing I've attempted so far has proven successful. I'm hopeful that someone could lend me a hand. The challenge at hand involves centering a standard <ul> list on the pa ...

Tips for eliminating white spaces when text wraps onto a new line

Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex. The issue arises when we require the gap between the tw ...

Alter the content of an HTML page depending on whether a user is logged in two times on the same page

Currently, I am in the process of developing a login system for my website. Everything seems to be functioning correctly so far. However, I have an idea to enhance the user experience by displaying their name with a 'Manage' button next to it whe ...

Difficulty in selecting an item from a list of array

Encountering an issue when attempting to create a custom select drop-down list. When utilizing an array list in the map(), everything functions correctly. However, upon pressing enter, an item in the input field appears as [object Object]. Despite numerous ...

How to add data to Laravel after successful ajax request

I have a div containing bids: @foreach($bids as $b) <div class="bids notice notice-lg"> <strong>{{$b->user->name}}</strong> is offering <span style="font-size: 18px" class="label label-success">{{$b->bid}} €</span ...

Tips for aligning two divs of varying sizes side by side

Imagine having two div elements: <div id="container"> <div id="left">line one</div> <div id="right">line one<br/>line two</div> </div> Is there a way to have the left and right divs align at the bottom li ...

Angular 14: Enhance Your User Experience with Dynamic Angular Material Table Row Management

My inquiry: I have encountered an issue with the Angular material table. After installing and setting up my first table, I created a function to delete the last row. However, the table is not refreshing as expected. It only updates when I make a site chang ...

Interested in learning how to redirect to a different page using vanilla JavaScript after submitting an HTML form with a Django backend?

Recently delving into Django, I encountered a challenge of linking a js file to my HTML form page and saving the form data before moving on to the next screen. My aim was to incorporate a feature where users can click a picture and POST it along with their ...

Assign a class to a newly created element using JavaScript

I have a unique element that I've created using the code below: connectedCallback() { var custom_element = document.createElement('Div'); custom_element.class = 'element demo3'; this.appendChild(custom_element); } Howeve ...

Having trouble with cc email addresses causing problems in Outlook

I'm encountering an issue where there is a '&' symbol in one of the cc email addresses. Due to the default behavior of the browser, the complete email address is not being displayed properly in Outlook. Here's an example: let to='a ...

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

What is the best way to click on the third div class "link" using Selenium when they all have the same div class?

While working with selenium and python, I encountered a scenario where all the HTML elements have the same class "links". There are seven links on the page, each sharing the same class and similar name. I am seeking guidance on how to interact with these w ...

Setting up a specific print media query for the body element through JavaScript

I'm facing an issue with my web page that has a bootstrap modal which pops up when a button is clicked. I've added a print media query to print the content of the modal, but it's causing a problem. When I include the media query in the CSS, ...

Error encountered in Flatpickr NextJS+TS application: Uncaught DOMException - accessing CSSStyleSheet.cssRules getter is not permitted for cross-origin stylesheet

After successfully integrating Flatpickr into my project, I encountered an issue when testing in mobile view. When trying to open the calendar by clicking on the input field, I received the following error: Uncaught DOMException: CSSStyleSheet.cssRules get ...

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...

"Enhance User Interaction with a Bootstrap Popup when Submitting Form Data via

As a junior web master, I have a simple question to ask. I have created a single page application for a client with a contact form at the end of the page. The validation is done using Bootstrap, but the only method I know to send the form data to a mail id ...

Having some trouble getting the text to float alongside an image properly in HTML and CSS

I'm having trouble positioning my text next to an image. I've tried floating it to the right and even using a flexbox, but nothing seems to be working well. Here is the code I have... <div class="tab-content"> <div clas ...

Creating a striking two-tone border pattern in an HTML document

Looking to create a design with a straight line that features two colors and a slanted line in between. Here is an example of the desired result: https://i.stack.imgur.com/9ys6e.png ...