When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the height of the page to remain fixed while the web page expands horizontally from left to right. How can I achieve this?
Check out this fiddler example showcasing the implementation of min-width and display:table-cell: http://jsfiddle.net/HarishBoke/c8G7V/
To enable horizontal scrolling on the main parent element (likely a 'body' tag), you can use the CSS property overflow-x. It would look something like this:
body{
overflow-x: scroll;
}
It is important to note that this solution may not work well with Internet Explorer versions prior to IE8. To keep the height of the page fixed, specify the height in CSS and set the overflow-y to hidden. This will hide any content that exceeds the parent element's height without stretching it.
To prevent your body container from adding a new line when running out of space, you can create an extra div with a large width to contain other smaller divs.
Here is the HTML code:
<div id="container" class="clearfix">
<div id="wrapper" class="clearfix">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
<div id="div4">Div4</div>
</div>
</div>
And here is the CSS code:
#container {
height: 275px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#wrapper div {
float: right;
border: 1px solid black;
width: 200px;
height: 100px;
display: inline-block;
}
.clearfix:after {
content: " "; /* Older browsers do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To make the design more dynamic, you can calculate the total width taken by inner divs and adjust the additional space on the wrapper div accordingly using JavaScript:
var width = 0;
$('#wrapper > div').each(function() {
width += parseInt($(this).css('width'));
});
wrapperWidth = width + 100;
$('#wrapper').css('width', wrapperWidth);
You can view an updated demo here.
I'm looking to incorporate animations similar to this example into the background of the page below. However, I'm unsure how to achieve this using Bootstrap 5. The image provided above is what I envision as the background for my HTML page. Any gu ...
I'm currently dealing with an html report that contains a table, which can be seen here http://jsfiddle.net/fhwoo3rg/2/embedded/result/ The issue arises when trying to print the report, as it breaks in the middle of a table row like this: I've ...
In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...
JSBIN Is it possible to center the number row without using JavaScript to calculate its position, considering its parent has a fixed attribute? I've tried using CSS properties like margin and text-align with no success. Any suggestions on achieving t ...
On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...
Greetings, dear community members, I am currently utilizing angular along with angular material in my projects. By default, when a material dialog is opened, it slightly darkens the background. However, I am interested in having a blurred background inst ...
As I work on designing web sites, I often face challenges. One of my go-to tools is bootstrap, especially when creating card elements. Here is the code I typically use for creating cards: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c ...
Is there a way to perform variable substitution, especially in CSS using JavaScript? I am looking for a solution that offers more features than just variable substitution, such as the LESS syntax. Has anyone come across a JavaScript implementation of LES ...
Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...
I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...
As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...
Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, whic ...
Struggling to make my HTML Form responsive - it displays well on desktops, but not on mobile devices or tablets. Want to take a look at the code? Here's the link: JSFiddle I've attempted removing overflow: hidden and white-space: nowrap; from t ...
Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...
This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...
My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far: @media screen and (max-width: 768px) { h1 ...
I have a client who is requesting a sold text to be displayed on top of all images that have been sold, positioned in the bottom left corner of each image. While I have successfully implemented this feature, the issue arises when dealing with images of var ...
Currently, I am developing a CSS concatenator and one of the tasks involved is URL to absolute URL rewriting. For this process, I exclude any absolute URLs that start with http, https, etc. In the case of Django projects, they designate the following URL ...
Within a larger div, I have a very wide inner div that scrolls left and right based on the position of the mouse. I found the code for this from an answer at There are two transparent divs above everything else, which capture the mouse position to determ ...
I am currently tackling a project that involves using SASS for part of the code. However, I have made the decision to transition from SASS to vanilla CSS. My goal is to find a way to convert all SASS segments into CSS either programmatically across the ent ...