I'm using CSS3 Multicolumns with column-width set at 200px, leaving column-count free to adapt to different screen sizes.
Here is the code I'm working on: http://jsfiddle.net/kBPUX/
On my 1280px wide laptop, the columns are centered as the window expands from one to two all the way up to four columns. It works great but then suddenly at four columns when the window is maximized, the columns all suddenly left justify leaving a big ugly gutter on the right.
Any idea what that's about and how to make columns centered at any resolution?
EDIT: After playing with it some more, I believe what is happening is that the browser doesn't want to make any more columns. Column-fill is left unspecified so it defaults to auto and tries to match the column heights as closely as possible. Adding more columns would result in columns with differing heights. It is at this point that I want to ensure the columns are centered in the parent container, and not left justified.
Notes: This works for me in Firefox, Chrome and IE9 which is all that I'm supporting. I absolutely will not touch JQuery layout products; it has to be pure CSS.
Why don't you use column-count?
http://jsfiddle.net/Svyy2/4/
Also look at the div's width. If you set them to the same width as columns you will get problems because width+padding+border > column width. Set it to 90%, for example.
As of today, I don't know of any working solutions to my problem, but I believe that the proper solution is the column-space-distribution property of the multicolumn spec, but it isn't implemented by any browser yet.
Related
I want to utilize CSS3 Columns around my site as it on wide pages provides a better UX for the users. However if I use CSS3 Columns, sometimes the left column is full (lets say 20 lines of text) and the right side only have2 lines of text. Can I with pure css3 (maybe Flexbox) make it have equal amount of content? Or do I need JS to fix this?
Beaware I'm not talking about equal height, but equal amount of content :)
You'll need to specify a height property.
From the Mozilla docs:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Sorry it was a padding-bottom which messed it up. When I remove that it spreads out nicely. Strange!
i have been looking at many responsive grid systems(best example is foundation) and they all seem to float the last child column right this annoys me especially when creating pages with dynamic content is there a good reason they do this?
if so is there any good workarounds?
The last column is floated to the right in fluid grid systems to work around rounding errors in different browsers, Safari seems to be the worst.
If you have X amount of columns set to a percentage width (with or without gutters), its rare that the total width will equal 100%. Due to subpixel rounding errors it may be 98%, 99.327%, etc. Usually its under 100% by just a bit, but a noticeable bit.
So if you have a row of say 2 or more columns and right after have a element that is 100% wide, the right edges will not line up if all the grid columns are floated left.
Due to the subpixel rounding issue, the grid columns would be just a bit less wide than the 100% element. To get around this, people float the last column to the right. This hides the subpixel rounding space between the last column and second to last column instead of after the last column making it less noticeable.
.span-last { float: right }
Here's a demo: http://codepen.io/bjankord/pen/mvKkn
Resize the page and look at how the last column lines up on the right.
Not an ideal solution (the !important) but for the most part you should be able to override it with something along the lines of
tr td:last-child{
float:left !important;
}
or jQuery if it's added with something after CSS has been loaded
$('tr td').last().css('float','left');
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
I want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.
What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/
Edit: Resolved, see comment below
Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.
What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.
You can use JavaScript to get the height of the left div, then set the right div to this height.
To get height of the left div:
var divHeight = document.getElementById('left').offsetHeight;
To set height of right div:
document.getElementById('right').style.height = divHeight+'px';
Your JSFiddle example fixed.
So, I got an answer to my question from #thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell
I have this working fine: http://jsfiddle.net/uwcEw/ - a traditional border layout on css.
What I want to do is have another 5-region border layout within the "middle" of the border layout. Re-applying the same pattern from above I get this: http://jsfiddle.net/6bked/4/ (edited link), which does not work, clearly it is not relative to it's parent container, but i'm not sure how to fix this so i can apply this pattern as needed in a nested context.
Any help? Also if there's a better way to do this (Compass+Sass/blueprint/js layout) I'm open to suggestions.
UPDATE
I also wanted to make clear I only care about this working in modern browsers (Webkit, FF) mostly concerned with Webkit and I am not worried about users who don't have javascript enabled
I'm not exactly the biggest fan of fixed layouts, but if I understand correctly this should be what you're trying to do: http://jsfiddle.net/8Cq9A/.
The dimensions are relative to the browser window, even the nested set of div's. What you needed to do to fix your layout was adjust your inner dimensions taking that into account. For example if your outer left and right div's widths are set to 10% (meaning 10% of the width of the browser window) to split the center div into 2 equal halves, you'd set each of their widths to: (100% - 10% - 10%) / 2 = 40%.
Personally, I'd look into using floats: http://jsfiddle.net/Sf8Kp/. The issue you will run into here though, is if you're wanting equal height columns as seen in the link.
There are MANY articles floating around on how to tackle this though. A few good reads that have been around for a while: alistapart (1, 2), positioniseverything. Search around for faux columns and 3 column [liquid|elastic|equal height] layout.