i have been looking at many responsive grid systems(best example is foundation) and they all seem to float the last child column right this annoys me especially when creating pages with dynamic content is there a good reason they do this?
if so is there any good workarounds?
The last column is floated to the right in fluid grid systems to work around rounding errors in different browsers, Safari seems to be the worst.
If you have X amount of columns set to a percentage width (with or without gutters), its rare that the total width will equal 100%. Due to subpixel rounding errors it may be 98%, 99.327%, etc. Usually its under 100% by just a bit, but a noticeable bit.
So if you have a row of say 2 or more columns and right after have a element that is 100% wide, the right edges will not line up if all the grid columns are floated left.
Due to the subpixel rounding issue, the grid columns would be just a bit less wide than the 100% element. To get around this, people float the last column to the right. This hides the subpixel rounding space between the last column and second to last column instead of after the last column making it less noticeable.
.span-last { float: right }
Here's a demo: http://codepen.io/bjankord/pen/mvKkn
Resize the page and look at how the last column lines up on the right.
Not an ideal solution (the !important) but for the most part you should be able to override it with something along the lines of
tr td:last-child{
float:left !important;
}
or jQuery if it's added with something after CSS has been loaded
$('tr td').last().css('float','left');
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.
This has plagued me for so long, and I've only ever found solutions that reduce the issue, rather than eliminating them. Three divs of 33% width (so technically, not even 100% combined width) look just fine on my screen, but when zoomed in, the left-most div falls to the next line. Why is this?
Mind you, this is after eliminating white space in code. I use the > selector in CSS to set the font size of the containing div (that holds the other three) to zero, which achieves the same results as the uglier, less readable solutions of putting things on one line, or using HTML comments.
I shouldn't need to provide any example code. It's an issue in any set of inline-block divs set to percentage widths inside a containing div.
It is happening just because of spaces between inline-block divs...
like Code
On above code browser counts a space between and
So add css property to parent
.parent {
font-size:0px;
}
See difference between this fiddles
Your Problem http://jsfiddle.net/BS72X/1/
Nd here solution http://jsfiddle.net/BS72X/
Hope this helps you..
I'm trying to achieve the effect of a horizontal accordion using exclusively CSS for animations and layout. So I have 4 columns set up and the main difference with a classic accordion is that when I click on a column, instead of expanding in one direction, it should expand in both directions and push the other columns left and right.
Here's a compact version of my code right now : http://jsfiddle.net/4ZGmj/183/
If you click on the red column, it works exactly as intended: the column is expanded in both directions and all other columns are pushed to the right. Now if you click on the green column, you'll notice something different: the column expands in both directions as intended, but it only pushes columns to the right while overlapping the column to the left. What I would like is for each column to push all neighboring columns when expanded.
I guess it might have to do with the fact that my columns are floated left. Do you guys have any insight on what is causing this behavior and what I can do to fix it ?
Thanks in advance
I think your issue may be in the .animate class, where you give it a negative 50px margin. Negative margins overlap the "previous" element (in all directions). If you remove the -50px, the images will only "flow" to the right, since they're "glued" via the float:left property, which will not do what you want anyway :(
I think the way to get around this is by using relative dimensions. Try setting up a div with a fixed width and use relative dimensions (like 25% for each). You probably have to set a behavior on the :not clicked divs aswell.
Like, if one div is ".animated", it has 33% width, while the others would have around 22%...
There's probably a better math you can arrange for it, though!
edit: typo
I was able to fix it and get the intended effect by removing the negative margin value from the "animate" class (this was responsible for expanding in both ways, but also caused the overlapping to the left). Instead, I added a new class "pushleft" that has this negative margin value and that I always apply to the first column. You can see the effect and get a better understanding of the idea here : http://jsfiddle.net/4ZGmj/185/
Thanks for your help, I wouldn't have fixed it if it wasn't for your input.
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.
So I wanted a centered, constant width, three-column layout that was compatible with IE and whose columns would stretch to all be of equal height (equal to the height of whichever column had the tallest content). I know- keep dreaming, right?
Well I almost figured it out. After combining the techniques I found here on Stack Overflow with a nifty CSS hack for fixing width issues and the text-align trick for centering, as well as experimenting with different margin/padding values, I have a nearly perfect layout. I'm doing this for a friend's aunt and you can see what I have so far at www.allfourseasonslawncare.com/index.php (The index.html is her original site which she paid someone $500 to make for her. I'm re-creating the page using CSS)
The only bug I'm getting now is that in IE the left column has about a 30 pixel left margin, and all elements inside of the left column have a second 30 pixel left margin.
I can easily fix this using the html>body trick to give a larger negative margin to IE, but I'm trying to figure out where this magical margin is coming from so I can look for another solution. Any ideas?
It might be because your ul elements have a 30px margin. Try adding a span to each list item and then add the padding.
Also, about the layout, you shouldn't need to add margin to each column (I see you have margin on .leftRail, .rightRail, etc). I noticed your .columnWrapper element is only 615px wide, thus you're using negative margin to move these elements.
Instead, you can use a clearfix hack to effectively float elements. (Link for the CSS is below, paste it into the bottom of your CSS file)
After you placed the clearfix in your css, then you go to your wrapper div that is wrapping all of the columns and simply place a class="clearfix" on it.
Then, you just float each column left (float the .rightRail right), specify widths and voila! It should be a 100% working, less-hacky solution.
When you hack too much, IE tends to bug out. Comment if you need any help.
Clearfix: http://gist.github.com/550114
So I spent an hour or two yesterday wrestling with it and I spent another hour this morning (posting updates as I started to get closer as comments to my own question) and I've finally figured it out.
In Internet Explorer, the "width: 100%" command is interpreted as the entire width of the parent element, not the width minus padding. This was giving the table a width of 615 pixels (the width of the center column). Seeing that this would stretch beyond the container, Internet Explorer respected only the left padding and the table stretched 15 pixels (the size of the left padding) beyond the right side of the column.
Since it stretched outside of the column, this re-arranged all floating elements in a way that to Internet Explorer seemed logical. That being, for some ungodly reason, moving the left rail the distance of the right padding (15 pixels) to the right of the left padding (15 pixels into the center column), thus moving it a total of 30 pixels into the center column, or the magical 30 pixel margin.
The solution? I'm still working on this. I moved the padding from the #content div to the #center div as an experiment and this caused the issue to arise in Chrome while simultaneously resolving it in Internet Explorer. At least the primary question was answered, though. We now know where the magical 30 pixel margin was coming from. As a quick solution I've set a constant width on the #content div of 585 pixels and given it margins instead of padding.
#center{
float:left;
width:615px;
margin-right:-615px;
}
#content{
width:585px;
margin:10px 15px 10px 15px;
}