New to Susy. I have a 12-column grid with side-by-side content areas: content-left: span-columns(3,12); content-right: span-columns(9 omega, 12). both content areas must have equal height, matching the area with the longest content. Ordinarily I'd use a clearfix in this situation, but that doesn't seem to apply to susy grids. What am I missing?
Clearfix works fine with Susy, but clearfix won't give you equal height columns. It only forces the container to clear the columns. CSS doesn't actually have a good solution for equal height, but there are various workarounds you can try. Susy won't have any affect, for better or worse. All Susy really does is float columns and set their width.
Related
I need to have one 740px column for the content and one 320px for the sidebar so the container must be 1060px.
Is there anyway to get this exact grid size in bootstrap ?
I know I can customize there http://getbootstrap.com/customize/ but i dont know the exact numbers for get it.
You won't really get this "exact grid size in bootstrap" since the Bootstrap grid uses percentage-based columns widths.
The simplest approach is to override the Bootstrap css to set a specific width on those columns, which will (of course) result in the columns no longer being responsive. You can still use the responsive grid nested inside the outer columns, and other Bootstrap features.
2-columns fixed width layout: http://bootply.com/B9ti0Rjer1
You could optionally use a media query to apply the fixed widths on larger screens only: http://bootply.com/5Kv1z1XCQK
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'm trying to achieve the Pinterest layout with entities of variable width and height. So not only the height is variable in the given layout.
The layout from above is achieved with flexbox (row wrap) on the parent. I would like to move column 31 to be right under column 1, instead of where it is right now, and column 32 to be right under column 2, and so on. I think it has something to do with the cross-axis property of flexbox, but I could not find the right property.
This is a node webkit prototype, so if it works in webkit, then this is great. Any ideas?
Another idea that I am considering is using a css grid, but I have to define a finite number of grid rows and columns, while this layout should be flexible, so making the window wider should increase the number of columns.
Was answering another question about centering a div that had the bootstrap's span12 class applied to it, and part of the solution was to reset the float as the span12, as well as the other span* classes, are floated.
Since span12 width is 100% when combined with row-fluid and 1170px when not (and other sizes that I suspect are meant to fill most of the area on different screen sizes)
This to me suggests that it is mostly a standalone grid item: not meant to have other grid elements floating along side it.
I could see if they wanted to allow for having other grid elements along side it for really huge sites (screen widths of like 2560px etc), except this would not work at all when using row-fluid as the first one in the row would take up all the space as it uses 100% width.
But I personally have not seen many, if any, sites that would use such a huge width that would allow for using a span12 grid element along side other grid elements.
So does bootstrap implement other styling methods that make it necessary to float the span12 class? Or are they just anticipating future use for huge sites?
As I use bootstrap myself, if it is necessary for other styling techniques I do not want to end up one day having removed the float when it is needed and also do not want to mislead others when answering questions if the resetting the float would end up messing up their layout when using bootstrap.
Edit
As DontFeedTheCode points out this has been addressed in Bootstrap 3, all the other grid classes get floated while the 12th one does not.
in the 2.3.2 version looks like they were using [class*="span"] as the selector for setting styles so span12 gets selected by accident
As bootstrap is written in LESS, and in 2.3.2 all span classes were generated using .gridColumn() mixin - all span classes had the float:left;. This is not for any large layout like 2500 or such.
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