Is there any css/layout way we can have equal height columns via 960.gs
right now i have been using jquery equal height script
Any other recommended solution
You could try using the inline-block css display type. Depending upon your design that might do the trick, but won't if you need equal borders or backgrounds.
And you could use a <table>. I know how politically incorrect that is, but tables do work and are not hack. You may need to adjust the <td> style type for cellspacing and padding to get it compatible with the gs.960
Related
I am looking for a way to avoid having the table jiggle around as in the following:
I understand it is because of the hours changing it's number of digits. So is there a way I could set the width based on the font size and the widest XX.XX could ever be?
I could always change it to 'hours' instead of 'hrs', but I am a bit partial to 'hrs, and am just curious. Also if you were on a large enough screen it would go onto one line and the problem would persist.
Thanks
Edit:
Here's a minimum code example Fiddle
span is an inline element and has its width set to the size of its content. To be able to set the width you can set it to be an inline-block using display: inline-block;. Then, you can use either min-width or width to accomplish what you want to do here.
W3Schools has a great resource on the display property, and how different block elements work with different display properties.
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 never heard of this intrinsic value before until I come across this page on MDN.
From what I know intrinsic means natural. So how does this work out in CSS. I thought that auto would have been natural. I've searched around a bit but can't find anything on it.
What does it do different than auto?
The example I saw was max-width: intrinsic;
It looks like the intrinsic value is part of the newer CSS3 sizing module:
http://dev.w3.org/csswg/css-sizing/
I have not used it yet but perhaps the reference will provide you with more information.
Based on a quick review, this module would make it easier to specify how content fills the width and height of a parent containing block.
At the moment, JavaScript functions are often used to compute widths and heights of container blocks based on % values for variable child elements content.
It allows you to set the width of an element to stretch wide enough to accommodate its children. So, if a div element contained a wide image and some text, the div would stretch wide enough to accommodate the image, and the text would begin breaking at that threshold.
Definitely experimental and not widely supported: http://caniuse.com/intrinsic-width
Intrinsic sizing determines sizes based on the contents of an element,
without regard for its context.
http://dev.w3.org/csswg/css-sizing/#intrinsic-sizing
I have found that in iOS8, flexbox children may not always try to contain all their children and instead max their height to the available viewport.
min-height: min-intrinsic fixes that problem.
I am looking for a way to flow content into the next column automatically when it detects the height is not enough to content the elements.
I know this can be done in CSS3 with columns, but sadly IE users will not be able to use it.
Is there another way that I am missing via CSS?
For a pseudo code:
I have 400px height container with list elements within and the list elements are not fixed height as some lists have more content than others. When the list elements total height goes beyond 400px, it will just be hidden. Instead, I would like it to flow to the next column over and continue top to bottom again...
Thanks.
You could use a polyfill to support IE and still use CSS3 columns.
Here is a huge list of HTML5 polyfills, and the CSS3 - Multi Column Layout polyfill should fix your issue.
Now this is a tricky question, with the concern of not using tables or JavaScript for this task.
Basically I have a five columned row, one column takes any type of content that can extend the height, but the task is to make the sibling columns take up the same height as that column with fluid content.
Demo: http://jsfiddle.net/Mrg5E/
As you can see in the second row, it has bigger content inside it that takes up the height, but this breaks the siblings height too.
I've looked around proposed answers, mainly using tables or JavaScript - this is something I need to avoid this. I've also looked at hacks such as the Holy Grail, etc, but this is mainly for 2-3 columns when I have 5 columns (sometimes 4).
Is there a possible fix in CSS to match all the siblings heights?
If you have no idea what the one column with variable content's height will be, then no, you can't do this with CSS alone. You will need to either fake it, or use javascript.
If you have a fixed width layout, you could try the faux column technique. That's "faking it" with a background image that tiles vertically, giving the illusion that the columns are the same height. The example in the article uses two columns, but there is no reason you can't use it for five.
The other way is using javascript. If you are using jquery, there is a plugin that can help you out. The basic idea is to identify the greatest column height, then apply that height to the other columns.
Use the min-height property and for cross browser solution, take a look at:
http://css-tricks.com/snippets/css/cross-browser-min-height/
Working Example