I have some divs, and I want them to start filling the main div vertically, and then cause the main div to scroll horizontally.
Currently, I'm using float:left on child divs, but it does exactly the opposite: it starts filling the main div horizontally, and then the main div scrolls vertically.
The number of rows may differ based on screen size, so I can't create a table for this purpose.
table + some javascript hacks may allow me to do this, but I prefer a CSS (without any javascript) way. Because this code will run on mobile apps, and javascript will slow down the web app.
This is my current code, and here's the result of my current code. But I want something like this.
UPDATE: As #goliney suggested, seems that it can be done with css-columns. I created this example right now.
Now, there are these two problems:
While it's working good, it still needs some javascript to determinate number of visible columns (column-count) in the page. Although it's a minor javascript process, is there any way to do it in CSS, too?
Also, I prefer to show a little bit of fifth column, so user can know that this list is scrollable horizontally. But columns-count can't accept some float value (like 4.2), it only accepts integer values. So how can I do it?
As #goliney suggested, css3 columns can help.
I've created an example of using css3 columns in this issue, here.
However, it needs javascript to figure out count of columns, or since I'm targeting tablets, I can create some predefined classes using media queries.
Second, I needed some way to show a little bit of next column, so user can know that this list can be scrolled horizontally.
I've found that if I set a margin-left and then take it back into it's right place using translateX, it'll happen correctly.
So this is the final code for container div:
.main {
column-count: 4;
column-gap: 40px;
height:480px;
margin-left:80px;
transform: translateX(-80px);
}
(I removed prefixed properties here, but they're available in jsFiddle)
And this is the final result in jsFiddle.
Related
I'm testing out some code for a random personal project and I'm looking to place 3 boxes side by side (I believe as divs). But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?
Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time.
Unfortunately, I need more reputation to post my code in the proper format it seems.
Not 100% sure if I get you correctly.
For "But as you'll see they're not really centered (as three)/spaced out so well. I figured assign them unique IDs and increase padding but is there a more efficient way?", if you wanna make them horizontally centered, you can try this:
wrap them in a container node.
assign a width to this container in its style.
set both margin-left and margin-right of this container to auto
This should then make these 3 boxes (actually the container) horizontally centered.
For "_Also when the screen shrinks, the third box dips underneath, while the second box is still on the same line I want it so all boxes drop at the same time. _", perhaps width: calc(100% / 3) is what you want to put in the styles of these boxes.
In modern web browsers, even if #Slash_D response is correct, you can get a more flexible alignment using flexbox (here you have a complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
Futhermore, if you want all the containers drop at the same time, you have to deal directly with media query based on resolutions (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) , or use a grid system, like bootstrap, that helps you with media queries based on classess (https://v4-alpha.getbootstrap.com/layout/grid/#how-it-works)
Hope it helps
I am designing an elastic layout which is used with a dynamic number of items. As you can see, the layout is fluid and the number of items per row changes with the resolution. I can put on any classes I want on the item when I generate them with PHP if this helps.
Code
http://jsfiddle.net/N3VRM/3
http://jsfiddle.net/N3VRM/3/embedded/result/
Problem
I always want the left-most pink grids to align with the far left of the page and the same on the right side. Currently there is always an extra 1% margin on the pink squares, meaning they do not align with the "testing" text.
Invalid solution
The only solution I can come up with is to put a 1% margin on all content which isn't the pink grid so that they both align (i.e on the testing text), but on my production site, this is going to make it very messy. Using javascript would also be an invalid solution
Possible solution
Possibly the way to achieve this is to use the CSS nth item rule for different resolutions like below but I can't seem to get it working correctly:
#media (max-width: 1200px) {
.thumb:nth-child(3n+3) {
width:21%;
}
}
I just know there is a really smart, elegant solution to this and I can't figure it out. Points go for the cleanest, most compatible solution.
you could take a look at ways to justify align your boxes and use display:inline-block; instead of float or display:flex.
IT will send to far right and far left first & last box of each line. but boxes will not be dispatch on last line with same margin and will break the column look.
display:inline-block and text-align:justify:http://jsfiddle.net/N3VRM/4/
display:flex and flex:wrap and justify-content:space-between :http://jsfiddle.net/N3VRM/5/
But what looks close to your needs is the use of the selector nth-child(n) to count and reset specific margin to selected boxes.
So let's test : .thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}
http://jsfiddle.net/N3VRM/6/
these count needs to be reset and set for each mediaquerie.
See in last fiddle linked, shadow color switching with mediaquerie.
This is a bit of a continuation from this question here: dataTables - Can't get horizontal scroll & fixed column to do their job. Seems to render differently everywhere. What am I doing wrong?
I got the dataTable displaying the way I want it to, for the most part. But this is what it looks like.
I had a picture of the previous look, but I somehow managed to edit it out while posting my answer below. I didn't think you could do that.
You can still see how it looked before by going to the jsfiddle link below.
I need to know if there's a way to not only close up that gap, that the scrollbar is clearly causing, but also if there is a way to move the scrollbar to the outside of the table.
padding-right: 140px; did move it over, but also covered up the Action column. I then tried to apply a z-index to the action Column, but when I moved it over, it covers up the horizontal scroll at the bottom. I can't change the height obviously because then it won't line up with the rest of the table. Any thoughts?
It took a bit of doing and a number of failures before I figured it out. Ultimately, I ended up adding a padding to the container producing the scrollbar, added a z-index to the actions div, which was already {position: absolute;}. Then, I added some jquery that adjusted heights and widths over several things and had to tweak the styles, accordingly.
The big part of it, after the padding and z-index and positioning, was that the table that wasn't static would scroll behind the now hovering Actions Columns. So I used jquery to insert a clone of the Actions column before it (or whatever is the last column, which may or may not be Actions on other pages, for example) so it would act as a place holder and push everything to the left and the Static Actions column would now overlap the clone and everything you want to remain visible stays to the left of it. If you do this in this way, it's important that the jquery that creates the clone column, happens before the dataTable.js and/or FixedColumns.js, because it needs the table HTML to be in place so it can do it's thing properly.
Now it looks like this:
Lots of tweaking later
I used the following to remove the scrollbar gap from a fixed column datatable.
table#mainDataTable{
margin-left: 300px !important;
}
div.DTFC_ScrollWrapper div.dataTables_scroll div.dataTables_scrollBody{
padding-left: 300px;
left: -300px;
}
div.DTFC_ScrollWrapper div.DTFC_LeftWrapper div.DTFC_LeftBodyWrapper{
z-index: 1;
}
This assumes you set iLeftWidth to 300px in the FixedColumn initialization. The selectors also assume bJQueryUI: false on datatable initialization.
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.