Is there a way to set a maximum width for a div and have a scroll bar appear if the contents exceed that width?

I am dynamically adding divs inside #maindiv, and I am never quite sure how many inner divs will end up inside it. Each inner div has a width of 160px. The CSS I'm using for #maindiv is as follows:

 #maindiv
 {
   overflow: auto;
   width: 640px; 
   height: 65px;
   background:lightblue;
 }

I want #maindiv to display a horizontal scrollbar when the total width of the inner divs exceeds 160px. However, my current CSS setup doesn't seem to be working properly. Despite setting the fixed width for the div, I can't get the horizontal scrollbar to appear. When the inner divs have more combined width than #maindiv, they simply make #maindiv wider. I've also tried implementing max-width:160px for #maindiv but without success. Any suggestions? Thank you in advance.

htmlcss

Answer №1

If you're looking to improve scrolling behavior, consider:

overflow-y: scroll;

Here is an example for reference: http://jsfiddle.net/4CCfy/

Answer №2

attempt

use the overflow property with a value of scroll;

If you only require scrolling on the horizontal or vertical axis

then

use overflow-x:scroll;

or

use overflow-y:scroll;

Answer №3

Feel free to jot down your thoughts here

#maindiv
 {
   overflow: scroll;
   width: 640px; 
   height: 65px;
   background:lightblue;
 }

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

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

javascripthtmljquerycss

What is the best way to align my grid cells to the center?

I'm facing an issue where the grid cells do not move closer together as I resize the window, instead they just stay in their place. I want to achieve a similar layout to . To share my project code, I have uploaded it on codepen: https://codepen.io/Ale ...

htmlcss

transferring the parsed JSON document to the recipient, however, it does not adhere to

After calling the API and parsing the JSON data, I now aim to present this parsed JSON in tabular form on the receiving page. Currently, it is being displayed as plain text. The API URL used for testing purposes has been sourced from WIKI to safeguard act ...

htmlnode.jsjsonhtml-parsingjsdom

The function `canvas.toDataURL()` does not produce an image as output

When I expect the image to return mirrored, it instead shows up as a black image. <!DOCTYPE html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <bo ...

javascripthtmlhtml5-canvas

Safari Glitch in Bootstrap 4

For a simplified version, you can check it out here: https://jsfiddle.net/dkmsuhL3/ <html xmlns="http://www.w3.org/1999/xhtml"> <title>Testing Bootstrap Bug</title> <!-- Bootstrap V4 --> <link rel="stylesheet" href="https://m ...

javascripthtmlcsstwitter-bootstrapsafari

Is there a way to prevent certain words or letters from being exchanged in PHP?

In my PHP project, I am trying to replace text in one textarea and display it in another. While most of the code works fine, there are some parts that are causing issues. Currently, I am using the str_ireplace function with around 60 different words and m ...

phphtmlstr-replace

How to dynamically set Bootstrap navbar item as active based on current filename?

Currently, as I construct my website using the bootstrap framework, I am facing a minor challenge. I want to activate a menu item based on the filename by utilizing an if statement. For instance, when the filename is "about," the "about" tab should be act ...

javascripthtml

Configuring express for serving static CSS and JavaScript files

I'm currently facing issues with setting up the middleware of my application to serve static files like css and js. My goal is to include css and js files from the public directory in my index.html. You can view the current file structure here Below ...

htmlnode.jsexpress

The conditional CSS appears to be malfunctioning

Hi, I am attempting to use conditional CSS in my stylesheet to set a different width for IE6. I have tried the following code but it is not working: div.box { width: 400px; [if IE 6] width: 600px; padding: 0 100px; } How can I su ...

htmlcss

Utilizing CSS and javascript to display position indicators on a map

I need help creating a basic webpage with the following functionality: The page will contain a map as a background image in a div, with clickable images placed on top (each within its own div). When these images are clicked, markers should appear or disap ...

htmlcssgoogle-maps

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

I am experiencing issues with the background image not displaying correctly on Safari when accessing from my

I recently uploaded my simple website, but I encountered an issue when viewing it on my phone using the Safari browser. The background image at the top is not displaying properly. I attempted solutions from this and this, but unfortunately, none of them re ...

htmlcsssafari

JavaScript innerHTML not functioning properly when receiving a response from a servlet

Can someone help me troubleshoot the code below? I'm receiving a response from the servlet, but I can't seem to display it inside the div. Here is the response: lukas requests to be your friend &nbsp <button value="lukas"onclick="accfr(th ...

javascripthtml

Is it possible to use AngularJS to show additional information between rows when a table row is clicked in HTML

I'm currently working on an html table where the <tbody> is generated using angular's ng-repeat. Take a look at my html: <tbody ng-repeat="car in carList | filter:tableFilter"> <tr> <td><a target="_blank" h ...

javascripthtmlangularjs

Troubleshooting issue with CSS3 linear-gradient not functioning as expected

After watching a CodePen demo where CSS3 linear-gradient was used to create color effects, I attempted to use the same property on jsFiddle but it wasn't working. Can someone help me troubleshoot this issue? You can view the original CodePen code her ...

csslinear-gradients

The jquery accordion title width does not align with the content width when an icon is included

Is there a way to adjust the widths of the heading and div elements after adding edit and delete icons to match the standard accordion style? Thanks <div id="accordion"> <h3><a href="javascript:;"> ...

javascriptjqueryhtmlcss

When I open my website in a new tab using iOS and Chrome, the appearance of the absolute element is being altered

I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...

javascripthtmlcss

Methods for incorporating rtl functionality into Angular Chosen

I am currently using Angular with Chosen (source) and I am attempting to implement right-to-left (RTL) support. Here is my demo, but despite referencing resources, I am encountering issues. The main problem arises when the body element has a dir="rtl" att ...

htmlcssangularjsjquery-chosenangular-chosen

How can triple nested quotes be utilized within Django templates?

Currently, I am attempting to utilize inline CSS and load an image as a background in a Django template. My goal is to include three quotes, however, I am unsure of the correct way to achieve this. Can anyone provide guidance on how to properly modify the ...

htmlcssdjangodjango-templates

The slider components have an endless loop feature that only runs once before coming to a

I'm working on creating an infinite slider that loops continuously without the need for navigation buttons. Instead, I plan to allow users to control the slider using touch gestures (although this functionality is not yet implemented in the code snipp ...

javascripthtmlcsssass