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.
Related
I may well be asking for the moon on a stick, here, but: I'm trying to figure out how to get a two-colour background to delineate the two columns of the main content.
The background must be full viewport width (edge-to-edge), and the central content is responsive with a max-width of 960px, split into two columns; the first column is 2/3 of the width (max of 640px wide) and the second column takes up the remaining 1/3 (max of 320px wide). Probably the easiest way to explain it is with a GIF:
As you can see, the left-hand part of the light blue 'sidebar' background colour always lines up with the left side of the actual sidebar column. It was pointed out to me that the checkout on woothemes.com has pretty much this exact same effect (although I think you need to add something to your basket to see it). They appear to have achieved it with linear-gradient, and it boils down to this:
background: linear-gradient(90deg,#fff 53.5%,#f0f4f5 46.5%);
background: -moz-linear-gradient(left,#fff 52%,#f0f4f5 46.5%);
The problems are:
I don't understand these declarations at all - why are the second color-stop's values lower than the first (and why is the -moz declaration's first color-stop a different percentage)? Adjusting it doesn't seem to make a difference, but I definitely need to update the values, as they don't match what I need... but I don't get it.
Although the effect is close, it unfortunately is not perfect: for a start, the stop between the two colours is kinda blurry; and worse, the line does 'drift' when rescaling. Although it's only by a small amount, unfortunately it's enough to kill the illusion with the design I've been given.
I've tried a couple of methods, including variations of linear-gradient and a pseudo-element with percentage & calc()-based offsets, but I'm totally not getting it. I've debated whether this is something I can achieve with some super-clever SVG element handling, but I seem to be totally stuck on something that looks deceptively simple.
Is there a way to achieve this with pure CSS?
I didn't look into the woothemes.com example, but here's my take:
http://jsbin.com/jofeseseyo/edit?css,output
This would need to be adapted a bit based on the rest of the site, but the idea is: one container of max 960px, with two children (66.666% and 33.333% width). Each child has a pseudo-element that is absolutely positioned at the point where the two columns meet. Then they are z-indexed behind everything.
I don't know how the rest of your site looks, so I left the rest a bit arbitrary. The background color columns have a fixed height, right now at 200vh.
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
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.
http://jsfiddle.net/ZGhEe/
I've read several tutorials and they all say use float or use relative positioning, but all the techniques I try aren't giving me expected results. This is a pretty simple thing to do, but I want to do it the "correct" way since using html tables is punishable by death. Any help?
If I use float left it stacks unnecessarily when the browser gets narrow..
When using float and you want it to show side-by-side, you need to set the width and make sure the sum of the widths are less than the width of the container, like so.
If you want to make your browser fit it all of the browser. Make your browser fluid.
i.e. Give % while defining the width of the layout.
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