I'm trying to create a simple effect where a fixed height and width div contains a series of child divs that can be scrolled horizontally.
However, the children are not floating as expected in the following code:
.a {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.a > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}
<div class="a">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
There is no need (and it's not recommended) to make changes to your HTML structure.
To prevent line breaks, simply apply the CSS property white-space:nowrap.
.a{
width:200px;
overflow-x:scroll;
border:3px solid red;
white-space:nowrap;
}
.a > div {
width:170px; height:170px;
display:inline-block;
background:#eee;
border:1px dotted #ddd;
}
View an example here: http://jsfiddle.net/5Rz98/3/
The key is to nest a div within the container that has a sufficient width to hold both div's side by side. If not, attempting to float two div's with a combined width of more than 200px (the size of the container) will result in layout issues.
Markup
<div class="a">
<div class="inner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
CSS
.a{
width:200px;
height:200px;
overflow-x:scroll;
border:3px solid red;
}
.inner{
width:344px;
}
.inner div{
width:170px;
height:170px;
float:left;
background:#eee;
border:1px dotted #ddd;
}
Each child element has been assigned a width of 170px, however, the parent container is only 200px wide. It is recommended to adjust the width of the child elements to be less than 50px:
.a {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:45px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}
Additionally, include overflow-x: auto in order to initially hide the horizontal scroll.
<div class="a">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
.a {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:700px; height:170px;}
.a > div > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}
To achieve the desired layout, you can create another nested div within the .a class with a sufficient width to accommodate all inner divs floating inside. Here is an example:
<div class="a">
<div class="b">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
.a {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.b {width:800px}
.b > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}
Ensure that the styles are applied correctly to achieve the desired result.
Having trouble with a jQuery function that keeps triggering the second function every time I click. How can I fix this issue? I designed a navbar with 3 links, each linked to a different .contentDiv with unique IDs. Whenever a link is clicked, a toggle fu ...
As someone new to Javascript, I am facing a bit of confusion when it comes to classes and objects. Recently, I refactored some code into a working class but the process did not go as smoothly as I had hoped. Despite searching through Stackoverflow, Google ...
A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...
Could you please take a look at the code snippet below? I am dealing with a situation where I have a container with a fixed width, and inside that container, there are rows whose width exceeds that of the parent container. Some of these rows have a backgro ...
I have an SVG file containing two different paths. <path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44 ...
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Yehee-Lounge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav ...
I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...
Query: I am interested in executing PHP within HTML documents to include HTML using PHP include();. Question: Would it be more beneficial to change .php to .txt for my AJAX-loaded pages and switch my .html files to .php? This approach might resolve the ...
I need the function submit_click to be triggered when the submit button on the HTML section is clicked <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" %> <html xmlns="http://www.w3.o ...
I am currently working on designing the footer for my website. My goal is to have 2 divs and one list displayed inline within this footer. However, I am facing an issue where using the CSS Property display:inline-block is not achieving the desired result. ...
I'm facing an issue where I need to change all src attributes in the HTML code to absolute paths instead of relative paths. I attempted to solve this problem using HTML Agility: string html = "<body><div><img src=\"/folder/a.png&b ...
After encountering a bug with a non-clickable video player inside a jquery ui dialog, I resolved the issue by changing position:relative; to position:inherit; Other solutions included removing position:relative; altogether or adjusting the z-index of the ...
Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance. I must confess, I'm not very familiar with this, so hopefully, it's not too complicated. While my question ...
I'm struggling with positioning the Facebook iframe embed to sit on the left of the text. I want it to be aligned with the left margin, but also have the text flow beside it from the same height. Can anyone offer some guidance on how to achieve this u ...
I am trying to create a container with both horizontal and vertical overflow using the "auto" value. I want the content inside this container, which will mainly consist of large tables, to be scrollable within a window. It would be ideal if this container ...
I've encountered a strange issue with the font-weight property when applied to a button element. When set to 400, everything functions as expected. However, attempting to set it to either 300 or 500 does not produce any noticeable changes. Interesting ...
Can anyone help me figure out what's wrong? I'm trying to encode and decode a simple input, but it just doesn't seem to work! Any ideas why? Thanks in advance for your assistance :) ENCODE: function encryption_encode(s, delta) { var te ...
I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow- ...
When I use the following code: <input type='month' ng-readonly='vm.isReadonly' required min="{{vm.threeMonthsAgo}}" max='{{vm.oneMonthAhead}}'/> I am experiencing some difficulties on mobile devices that do not occur o ...
I am facing an issue with the Carousel Slider. I added an image to index.php, but when I tried adding a second image, it appeared just below the first one in the carousel. Click here for the first image Click here for the second image Slider.php < ...