Experiencing issues with the overflow-x property not functioning correctly

This is my interesting

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <style type="text/css">
    .bigbox {
      width:1024px;
      height:600px;
      background-color:#000000;
      overflow-x:auto;
      overflow-y:hidden;
    }
    .box{
      width:500px;
      height:500px;
      float:left;
      background-color:#AAAAAA;
      margin:5px;
    }
  </style>
  </head>
  <body>
    <div class="bigbox">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

What is the best way to make all boxes display horizontally?

Moreover, how can I ensure that the bigbox has a scroll bar with a fixed width?

I attempted to adjust the width to 5000px, which worked, but it caused the width to extend beyond the boxes.

Answer №1

CodePen Example -- JS Bin Demo

Hey, let's now include some characteristics

such as these

    .mainbox {
    white-space:pre;
    }
    .container{
    overflow:hidden;  // exclude this instruction 
    display:flex;
    align-items:center;
    }

View live demo here

Answer №2

Adjust the .box div by setting display:inline-block;

.bigbox {
      width:400px;
      height:600px;
      background-color:#000000;
      overflow-x:auto;
      overflow-y:hidden;
      white-space:nowrap;
    }
    .box{
      width:100px;
      height:100px;
      float:left;
      background-color:#AAAAAA;
      margin:5px;
    display:inline-block;
    }​

View Edited Demo Here

Answer №3

A helpful method (from my experience) is to enclose all elements with the class .box and set their parent's width to be equal to the total width of all its children.

In your specific case, it would look like this:

CSS:

.boxcontainer {
    width: 3060px;
}

HTML:

<div class="masterbox">
  <div class="boxcontainer">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

If the number of boxes is not fixed, using JavaScript to dynamically set the width of .boxcontainer is recommended.

Keep in mind that older browsers may not support overflow-x (IE9+ only).

Consider adding overflow: auto as a fallback before specifying overflow-x and overflow-y.

Check out this code example: http://jsfiddle.net/abc123/4/

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 it possible to utilize formatted strings in Python selenium to locate elements based on different categories such as xpath, css, etc?

An interesting revelation just hit me and it's quite unsettling since my entire program relies on locating elements by CSS selector using formatted strings. Let's consider this example: stop_iteration_for_foh = driver.find_element_by_css_selecto ...

Personalize the HTML output of search results in Magento

Looking to design a unique layout for the CatalogSearch result page. Hoping to simplify the page by removing pagination and other tools, as we only have a few products. Also wanting to customize how results are displayed, such as adjusting image sizes and ...

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

In my current project, I am utilizing Angular to dynamically populate data in an HTML table. Instead of manually coding each row for display, I am in need of a solution that allows me to programmatically define each HTML row. The Angular controller snippet ...

Integrating a PHP function within an ECHO statement

Here is a code snippet I'm currently using in my Wordpress: function wpstudio_doctype() { $content = '<!DOCTYPE html>' . "\n"; $content .= '<html ' . language_attributes() . '>'; echo apply_filte ...

Using CSS and Semantic UI CDN may encounter issues when testing in a localhost environment

My website's html code is structured as shown below, and the directory path is correct: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < ...

Is there a way to retrieve the value from a select tag and pass it as a parameter to a JavaScript function?

I would like to pass parameters to a JavaScript function. The function will then display telephone numbers based on the provided parameters. <select> <option value="name-kate">Kate</option> <option value="name-john">John& ...

When generating dynamic text boxes, a new area is always allocated for each new set of dynamic text boxes that are created

<html> <head> <script src="jquery-1.10.2.min.js"></script> <script> function AddingTextBoxes() { var NumOfText=$("#NumOfTextBoxes").val(); $('#NewlyCreatedSe ...

Utilizing a jQuery plugin for input file validation

This code is functioning properly, however the file field is not being validated. All input fields are successfully validated by this plugin except for the file type field. I believe there may be something missing in my implementation, so please help me de ...

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

What is the best way to showcase an image using Vue data that is in string format and originates from the backend?

Within my project, the profile image paths of users are stored in the database as a varchar, which is then converted into a string in the backend. This string is then utilized and sent to the frontend using JSON. I am currently facing a challenge in utiliz ...

Changing the class of a div element in a jQuery array or JSON object with a click event

I am trying to create a function where clicking on a div adds its child's class to either a JQuery array or a JSON object. Clicking on the div again should remove the class from the array. Multiple divs should be able to be "selected" and deselected. ...

Utilizing the .fadeToggle() function to create a fading effect for text, which fades in and out

I am on the verge of achieving my goal, but I could use a little more assistance with this. $('.change').hover(function() { $(this).fadeToggle('slow', 'linear', function() { $(this).text('wanna be CodeNinja' ...

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...

Is there a way to keep my <nav> positioned in the top right corner of my header?

I'm in the process of setting up a fresh homepage and I've implemented the code below: menu { width: 100%; height: 60px; background: rgb(0, 0, 0); z-index: 2; position: fixed; } #content { margin: 0 auto; width: 1024px; height: ...

How can you vertically center text without using table-cell and line-height?

I have a webpage at this link and I am trying to vertically align the text. Using table-cell causes all items to display in the same row, which is not what I want as shown in the image at this link. Setting a fixed line-height won't work either since ...

What is the best method for caching inline SVG in web browsers?

Over the years, SVGs have remained popular due to their scalability. One key advantage of inline SVG is the ability to manipulate it with CSS and JS. Additionally, using the <use> tag allows for referencing the original element when repeating the sam ...

The placeholder text in the input field is not functioning/displaying as expected

As a beginner front-end developer, I'm struggling to understand why the placeholder isn't functioning as expected. I attempted to use the LABEL tag, but it remains visible even when typing into the text input field. The HTML is being served via E ...

The content is being pushed down by the responsive navigation bar

While the navbar is in normal non-responsive mode (I'm not sure if that's the right terminology) on Chrome and you scroll down, the logo image stays behind the menu. However, when the screen width shrinks and the menu collapses, clicking the icon ...

Access HTML content including styles using Angular

I have created an Angular application and I am looking to extract the html of a template from a large component, including the styles applied to the classes used. Can anyone advise on how to achieve this in Angular? Currently, I am attempting to use the fo ...