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.
Related
I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:
However, when the page is generated, this is what the output looks like:
How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.
If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.
Here's me saying the same thing, but with more words: CSS two columns with known children width
Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.
Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.
Be sure to account for padding and margin in the JS height calculations.
Try putting the divs into 3 columns instead of stacking them in the order they appear.
That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.
Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply)
Look at rules 5 and 6
I am trying to do something similar to float:left. For float:left, if you set a bunch of divs with this style property, it will position itself according to the width of window. When the window gets too narrow, it will become one column, and when we have large window, it will expand to multiple columns and so forth.
I want to do something similar but I want it to work like a vertical float. So if I have 5 items and the browser's window height can only contain 4 in one column, the extra div should position itself to the 2nd column. In simple terms, if I have a long list of divs, they should be listed in columns depending on the height of window.
Is there a way to do this with div and css or jquery ui?
This isn't possible with CSS alone. Your best bet is something like masonry:
http://masonry.desandro.com/
(or for snazzy filtering and stuffs isotope, which is powered by masonry: http://isotope.metafizzy.co/)
Hope that helps :)
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
I'm working on making a redesign of my college newspaper's website and got the design to fit nicely on an iPad. I'm now trying to switch it to a one column layout (for smart-phones).
The problem is that, in a single-column layout, the the right column must go above the left column. I would know how to do this if the code for the right column was written before the left column, but unfortunately it isn't.
How can I move the left column under the right column? Do I need to use Javascript to switch the column orders in the HTML code? Thanks!
EDIT: I realize that I can have a DIV that is invisible when the width > someNumber. I'd prefer not to have to be redundant though...
The CSS only solution is to start with the smallest screen as your default design then enhance as the screen size increases using media queries. Starting with the smallest screen first puts your markup in the correct order - for the image above Banner, Primary Navigation, Main Content (right-hand column), Aside (left-hand column) and (presumably), Footer. As the media queries apply additional CSS you can then float Main Content right and Aside left - the elements are positioned correctly for smaller or larger screens.
The easiest way I can think to do this is with jQuery (a javascript library) to remove the right column content from one div to another in the DOM. This allows you to create and remove the div's on the fly so there is not redundancy in the end.
If this is too vague, comment and I'll add an example.
CSS can take elements out of the document flow and put them anywhere, in any manner you want. But it cannot create a new document flow (ie it can't reorder elements). You need to position one element relative to the other or position them both absolutely.
If you have access to Javascript and are not concerned about graceful degredation you could also swap the .innerHTML of the two divs.
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE