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!
Related
I'm trying to build a three-column page with a fixed-fluid-fluid layout and equal column heights.
I found this:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-32-fluid-fluid-fixed/
it got me most of the way, but the columns aren't equal height.
I've also tried using CSS tables and it works except when scaling, the columns overlap.
Any ideas?
Edit: I was able to make this work just fine using CSS tables. I preferred that method for making the columns equal height anyway. The overlapping columns, it turns out, was a result of some floated content in my fixed left column. When I removed the float, the page scaled fine.
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
Briefly:
How do I lay out N columns of random height portlets all in CSS so that if the browser is resized, the number of is columns reduced (using #media (min-width:)) and the portlets still sit nicely together on the page with no gaps.
This is similar to
Float multiple fixed-width / varible-height boxes into 2 columns
but more general.
Detail:
I've built a web application (PHP / Zend Framework) with a "dashboard" page made of a series of portlets. The portlets can be arranged in 1, 2, 3 or 4 equal width columns (user selectable) in a fluid layout. When the user resizes the browser window, the columns expand to fill the available width and the portlets also expand horizontally. The vertical height of each portlet is defined by its content. Some are only 1-2 lines, others can be 30-40+ lines of text / tables / image etc.
I want to turn this into a "responsive design" so that the user doesn't have to select the number of columns. On a small screen (eg iPhone) only one column will display. On a wide screen they might have 4 or 5 columns. If the browser window is resized, the number of columns will adjust up or down to allow portlets to stay approx 300-400 pixels wide.
I think I can do this with a bit of jQuery and some server side support (PHP), but would prefer to do it all in CSS if possible (no / minimal javascript).
Use a combination of media queries and text alignment to achieve this:
In its natural state, ‘text-align: justify’ will not work unless the contents of the line are long enough to cause a line-break. Otherwise, the text remains left aligned. We can solve this problem by giving 100% width to an invisible inline element at the end of the line.
Because ‘text-align: justify’ is designed to work on individual inline words, it works on any inline element—and more importantly any inline-block element.
To account for any and all possible numbers of elements on the last row, the number of “placeholder” elements you will need to add is equal to the maximum number of elements per row, minus 2. These elements should be inserted at the end of your grid (before the “break” element if you are not using a pseudo-element to break the row) and then left alone. Since they do not occupy any vertical space, the “placeholder” elements won’t affect the layout if the last row is full or if your site is responsive and the number of elements per row changes. As long as you have enough placeholders for the widest view, you’ll be fine.
Obviously, this has some semantic implications—as there is no way to create any of these placeholders using pseudo-elements. On a grid where the last row will always have the maximum number of elements, we don’t need to use placeholders at all (just a break), but in most CMS situations they are necessary, and should be hard-coded into your HTML.
By simply applying ‘text-align: justify’ to the container, and giving the child elements ‘display: inline-block’ and a percentage width, you’ll never have to deal with horizontal margins ever again! (Oh and did I mention, when using this trick, you’ll also never need to use float on your elements ever again, so you can wave goodbye to those ignominious clearfixes and clear divs too!)
We should be aware that when using ‘display: inline-block’, our elements will be at the mercy of various typographic CSS properties, including font-size, line-height, vertical-align and word-spacing. These properties will have a visible affect on your layout’s whitespace, but can be easily adjusted or removed as needed. In 99% of cases, setting ‘font-size: 0.1px;’ to the container and ‘vertical-align: top’ to the child elements should do the trick.
References
Using text-align: justify for Layout
Swipe Me Responsive Slideshow
Text-align Justify and Responsive Web Design
Zoom for fixed and responsive sites | AlastairC
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.
In a two column template, how can we use background on each column repeated when height of both columns differ?
eg, if my column 1 height is 200px (after loading some dynamic matter) and column 2 height is 500px, column 1 background is shown according to 200px height and column 2 background is shown according to 500px but i want both columns' background to be 500px.
Note: heights may differ because of dynamic content that will be loaded.
Ah, equal height columns. You can find dozens of techniques online using JavaScript, CSS, images, etc., all with varying degrees of success.
I'm a fan of faux columns, where you have a single background image that is the width of both columns, and that image is tiled in a container element that surrounds both columns. Then the background will extend as far as the tallest column. Theoretically, this same technique can be used for two, three, or more columns.
The original article is on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), but the end result can vary a lot depending on your setup and structure.
Depending on other layout factors, an easy solution is to create a single background image that spans both, and set it as the background for the container element. That way, no matter which column has the vertically larger content, the background will span the entirety of it.
Of course, this really works best with fixed width layouts, etc.