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.
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 a complex table layout (jsfiddle). This is a long report with many sections and each section has a table in it.
The first two columns of the tables should have a fixed width to make sure they align nicely.
The third column should grow to fit the text inside of it without wrapping (it's always a single word).
The last column should always fill the remaining space.
When I just specify the widths of the first two columns and give the last column 100% width, then the last column fills the available space (good) but the widths of the first two columns are ignored.
When I give the table table-layout: fixed;, then the width of the first two columns works but the last two columns occupy the same screen space since I can't give the third column a fixed width.
Is there a solution for this?
Note: The solution doesn't need to work on IE! FF 12+ and Chome 21+ is enough.
Specify a general table with (e.g. '100%'). Then you only need to specify the widths of the first two columns. Therefore the two others behave like desired.
Here is the fixed fiddle.
In a nutshell:
Remove td.type { width: 100%; }
Add width:0.1em; to td.name
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.
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
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.