What is causing the divs to stack vertically instead of aligning horizontally?

I have encountered an issue with the layout of my HTML code. The inner divs are appearing in a lower row instead of horizontally inside the outer div with horizontal scrolling. I have already tried using properties like white-space:nowrap, but the problem persists. Why is this happening?

 <div style={{position:'absolute', width:'1200px', height:'80px',background:'#cc5',top:'270px',left:'100px',whiteSpace: 'nowrap',display:'inline-block',overflowX:'auto'}}>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>

            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>


            <div style={{width:'100px',height:'60px',background:'white',display:'inline-block',margin:'10px',float:'left'}}></div>
        </div>
htmlcssreactjs

Answer №1

Your code requires some adjustments outlined below:

<div style="position: absolute; width: 1200px; height: 80px;background: #cc5;top: 270px;left: 100px;white-space: nowrap;display: inline-block;overflow-x: auto;">
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
  <div style="width: 100px;height: 60px;background: white;display: inline-block;margin: 10px;float: left"></div>
</div>

Consider moving your inline styles to external CSS files for better organization. Additionally, ensure that the property overflowX is updated to overflow-x.

Answer №2

Since the style you are utilizing is:

display:'inline-block'

Furthermore, there seems to be an issue with your code block, which I have corrected in the two divs below: 

<div style="position:absolute; width:1200px; height:80px;background:#cc5;top:270px;left:100px;whiteSpace: nowrap;display:block;'overflow-x':auto">
<div style="position:absolute; width:1200px; height:80px;background:#cc5;top:270px;left:100px;whiteSpace: nowrap;display:block;'overflow-x':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

Using PHP to create custom HTML email templates and sending them out via

I have successfully used phpmailer to send normal pre-defined emails. Now, I am looking to enhance the email format by connecting my text editor with a PHP script to send HTML emails. The text editor is a template from CKEditor. https://i.stack.imgur.com/v ...

phphtmlemailpostiframe

Golang template's nested ranges

Being fairly new to this, I could use a little assistance. I have these two structs: type School struct { ID string Name string Students []Student } type Student struct { ID string Name string } M ...

htmltemplatesgostructnested

Unable to view the line number of a CSS style in Chrome Dev Tools while inspecting an element anymore

Today, a strange issue arose that has me puzzled. I can't seem to figure out what caused it. If you take a look at this picture here: This screenshot is from Twitch where I had a tab open. You can see the CSS file and line number displayed as usual. ...

cssgoogle-chromegoogle-chrome-devtools

Is there a way to adjust the height relative to the viewport in Bootstrap 5 for values other than 100?

Attempting to create a new type of div using a custom stylesheet with minimal non-bootstrap css. I am trying to convert each style rule from my django static files CSS into a bootstrap class, but I am stuck on viewport-based sizing. Prior to discovering t ...

htmlcsstwitter-bootstrapdjango-templatesbootstrap-5

Can I safely keep a JWT in localStorage while using ReactJS?

As I work on developing a single page application with ReactJS, one question comes to mind. I came across information indicating that using localStorage may pose security risks due to XSS vulnerabilities. However, given that React escapes all user input, ...

javascriptnode.jsreactjsjwtlocal-storage

Unnecessary additional spacing caused by inline blocks in Firefox

On my webpage, I have organized my div elements using inline-block properties. Strangely, Firefox is adding extra spacing between two specific divs, while Safari and Chrome display the design consistently. Check out this example here. #main { display ...

cssfirefox

What could be causing the issue with the focus not being activated when clicking on the input field in Vue?

I am facing an issue where I have to click twice in order to focus on a specific input field, and I'm having trouble setting the cursor at the end of the input. I attempted to use $refs, but it seems like there may be a deeper underlying problem. Any ...

javascripthtmlvue.js

Preventing Javascript Pop Up from automatically jumping to the top of the page

Upon clicking a button (refer to image below and take note of the scroll bar position), a div pop up is triggered through Javascript. View image: https://docs.google.com/file/d/0B1O3Ee_1Z5cRTko0anExazBBQkU/preview However, when the button is clicked, the ...

javascriptjqueryhtmlcss

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

csswordpresswoocommerce

In Bootstrap 5, the content within flex box containers always aligns at the top, regardless of other factors

I've been struggling to vertically align flex items within a div using bootstrap 5. Despite trying various methods, I haven't had any success. I've even created a Stack Snippet that perfectly reproduces my issue. It seems like a simple CSS f ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

htmlcsscentering

Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated. Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the ...

javascripthtmlcss

Troubleshooting Date Problems in Angular

When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...

javascripthtmlangularjsdatetime

Why is my filtering and sorting function failing to function properly?

I have a collection of events represented by an array of objects, where each event contains a start date and an end date. My goal is to filter out any events that have already passed based on the current time (now), and then sort the remaining events in d ...

javascriptsortingreactjsfilterreact-native

Is the hover effect malfunctioning, even though the correct style has been applied?

I'm currently working on a simple design, but I've encountered an issue. When I hover over the number blocks (1, 2, etc.), my hover effect doesn't seem to work. My intention is to hover over the list item and change the entire digit text fro ...

htmlcss

Displaying leap years and non-leap years in distinct tables

I attempted to organize the display of leap years and non-leap years from 1991 to 2100 into two separate tables, but unfortunately, I was unsuccessful. Could you kindly offer guidance on how to present this information in a table format or a grid system? ...

phphtmlcssbootstrap-modalleap-year

Send an object to query when using Router.push in Next.js

Just getting started with NextJs and I'm experimenting with passing an object to another page through a component. Let me show you the code and explain what I'm attempting to accomplish: The object I want to pass looks like this: objectEx = { ...

javascriptreactjsreact-routernext.js

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Troubleshooting Problem with Responsive Bootstrap Navbar

I've been working on creating a menubar using Bootstrap where the logo image is centered instead of being on the left side of the bar. However, I'm facing an issue where the right links in the menu go off the screen. When I view the page with a w ...

htmlcsstwitter-bootstrap

No changes were seen in CSS animation when using ng-repeat in AngularJS 1.3.1

Recently delving into the world of AngularJS and I seem to be missing something. I attempted a basic CSS animation [plunker][1] but it doesn't seem to be working. Any suggestions or assistance would be greatly appreciated. Thanks in advance! [1]: htt ...

cssangularjsanimation