I am trying to insert multiple children-divs into a parent-div. The parent div has a fixed width. The children are set to float left and will overflow the container.
I need the ability to scroll along the x-axis.
However, when I attempt to do this, the children end up on the next line instead of overflowing in the x-direction.
I have created a simple example in CodePen, but I can't seem to make it work...
To achieve this effect, simply add the CSS property white-space:nowrap to the parent div and replace float:left with display:inline-block in the child element.
Check out this example on CodePen
html, body {
width: 100%; height: 100%;
font-family: 'Montserrat', sans-serif;
color: #fff;
text-transform: uppercase;
}
.parent {
position: absolute;
width: 80%; height: 300px;
left: 20%; top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 30px;
overflow-x: scroll;
background: #f5f5f5;
white-space: nowrap;
}
.child {
width: 200px; height: 100%;
margin-right: 30px;
padding: 25px;
box-sizing: border-box;
background: #3b3b3b;
display:inline-block;
}<div class="parent">
<div class="child">Child #1</div>
<div class="child">Child #2</div>
<div class="child">Child #3</div>
<div class="child">Child #4</div>
<div class="child">Child #5</div>
<div class="child">Child #6</div>
<div class="child">Child #7</div>
</div>Check out this CSS snippet for creating a scrolling horizontal container with child elements:
.parent {
position: absolute;
width: 80%; height: 300px;
left: 20%; top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 30px;
white-space:nowrap;
overflow-x: scroll;
background: #f5f5f5;
}
.child {
width: 200px; height: 100%;
margin-right: 30px;
padding: 25px;
box-sizing: border-box;
background: #3b3b3b;
display: inline-block;
}<div class="parent">
<div class="child">Child #1</div>
<div class="child">Child #2</div>
<div class="child">Child #3</div>
<div class="child">Child #4</div>
<div class="child">Child #5</div>
</div>Here is a neat trick to try:
.container {
position: relative;
/* width: 80%; */
height: 300px;
left: 20%;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 30px;
/* overflow-x: scroll; */
overflow: scroll;
background: #f5f5f5;
overflow-y: scroll;
/* float: left; */
overflow-x: scroll;
}
.box {
width: 200px;
height: 100%;
margin-right: 30px;
padding: 25px;
box-sizing: border-box;
background: #3b3b3b;
/* float: none; */
display: -webkit-inline-box;
/* vertical-align: bottom; */
}
Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...
Recently, I observed that special HTML symbols like: ★ are appearing as question marks in my database records. I have set the type of the field as varchar and am utilizing Microsoft SQL 2008 for my database management. Is there a solution to this symbo ...
Why isn't my container DIV expanding to the width of the large table? <html> <head> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> <link ...
Is there a significant distinction between using single or double quotes in JS and CSS? Does it depend on personal preference, or are there certain instances where one is preferred over the other? In W3Schools, they employ single quotes for url('&apo ...
My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...
In my Angular application, I am working on creating a new component and injecting it into the app. Below is the code for the angular component: (function(angular) { 'use strict'; angular.module('some.someModule', ['bm.component.t ...
What is the proper way to create an xpath expression for the following block of html? <li> <a href="/parade/storeus/browse/Home-Accents-Radios/_/N-1c7kmv"> Radios </a> </li> ...
Today I want to discuss two different pages: VelocityMicro.com/Cruz.php and VelocityMicro.com/PC.php, which I am currently viewing in Firefox. The issue I am experiencing is with Cruz.php. When you click on a tab like "R100 Series" and then select an acce ...
Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...
For my latest project, I used Bootstrap to create a template that adapts well to different device breakpoints. Everything is working smoothly except for the positioning of the arrows on the sides of the image. I want them to be centered halfway down the ...
I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...
Looking to incorporate two unique CSS animations into my project. Utilizing two buttons and one object, I want the first animation to trigger upon clicking the first button. I understand how to handle one button and one animation, but am unsure how to man ...
My ASP:MENU is styled with some CSS properties, such as setting the 'height' and 'line-height' of each element to 15px. This design appears fine in Internet Explorer but seems too cramped in Chrome. Additionally, a 'border-bottom-s ...
After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...
My Bootstrap table setup looks like this: <table class="table table-striped"> <thead> <tr> <th>Date</th> <th>Name</th> <th>LastName</th> <th>Color</th> <th>Car</th> ...
We currently have a system in place that is dependent on a numeric value being set to either 1 or 2 in order to display specific icons. This method is functional. <span *ngIf="config.icon" [class.fas]="true" [class.fa-plus]="icon===1" ...
Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...
Welcome to my HTML Page! <html> <head> <title>Table </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> </script> </head> <body> <table ...
Recently, I've been working on implementing a Javascript CountDown Timer triggered by a button click. The Javascript code is stored in an external file, as well as the CSS for styling the timer. The problem arose when I tried including the Javascript ...
When it comes to excluding declarative event handlers: <a href='#' onclick=<handler> ... /> Is there a significant difference between an Attribute and a CSS Selector? For example, if I define my own attribute: <a href='#&a ...