Lets say I have 1000 px wide 2 column layout with 100 px gutter space (margin) and 50px on the left and right.. How do I apply the golden ratio to this layout?
Method One
c1+c2=800px;
c1/c2=1.618;
=>c1= 495px and c2= 305px
50px, column 1 (495px), 100px, column 2 (305px), 50px
Method two calculate the column widths ignoring the margins.
c1+c2=1000px
c1/c2=1.618
=>c1= 618px c2=392px
effective column width after adding the margins/paddings
c1=618px -100px = 518px
c2=392px -100px = 292px
50px, column 1 (51), 100px, column 2 (305px), 50px
% difference in two methods 518-495/518= 4%
The 4% difference would not make any any difference, but the % difference will be more when dealing with narrow layouts.
If you see this article,
http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/
In the first example they took padding out of the golden ratio, and in the other they made padding part of the GR.
Can someone please suggest which method is better.
I'm developing this layout for a customizable wordpress theme, I'm providing an option to pick fluid layout.
I cannot use the first method with golden ratio ( Can I ?? ).
Can I use method 2 without losing the harmony that GR brings to the design.
Please include the links and ref supporting your answer.
PS: I posted this question in graphic design section before, I was suggested to post it here. I hope I'm not violating any rules.
I can point you to this marvellous article about the golden ratio:
http://www.alistapart.com/articles/more-meaningful-typography/
It also contains a link to a useful tool to calculate numbers based on golden ratio and another couple of ratios. Here's the link for convenience:
http://modularscale.com/
Use these on your two column divs:
.golden-ratio-horizontal-primary {
flex: 1.618;
// or width: 62%;
}
.golden-ratio-horizontal-secondary {
flex: 1;
// or width: 38%;
}
Related
Maybe I'm making this more complicated than it needs to be, maybe it's not possible, but... ideally if there is white space I would like to utilise it.
I'm using Semantic UI stackable grid, if I made the browser width in the example screenshot below just a bit wider another 'post' would appear to the right and there would be 3 columns. Perfect!
I want to know if there is a way to dynamically calculate the 'unused space' so that if it's over a certain amount I can display a small item in that space.
If the user then made the browser a bit wider, another post would appear to the right to make 3 columns and the small item would disappear.
A point in the right direction would be amazing, can I dynamically calculate the number of columns and therefore work out their total width compared with window width?? Any other way you can think of achieving this?
Thanks, Lezlea
My site is in beta testing: http://fishtag.world/
(source: lezlea.co.uk)
Stackable Grid should keep your columns spanning the available space and on smaller screens it should make all 100% (https://jsfiddle.net/ryan_whitlie/2sLw5bon/), but yours seem to be wrapping before you hit smaller screen size. You perhaps have some margin applied to the columns?
To achieve what you are asking for, you would be better to split that section into 2 columns, left being say 75% the full width and the right at 25%. Showing the 'posts' in the left and your other content in the right. Then when the screen size gets to a certain size, hide the right column and only show your posts using CSS media queries:
#media(min-width: 600px) {
.posts {
width: 75%;
}
.aside {
width: 25%;
display: block;
}
}
This will apply widths and show (display: block;) the two columns on any screen/device with a width of 600px or more.
Check out the working version here and feel free to change the 600px value
https://jsfiddle.net/ryan_whitlie/cg9p3kuw/
I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.
Inside these block are are images which are set to either 100% *height/width* or 50% *height/width*.
All the images within the blocks a butted up next to each other, and all the blocks are butted up next to each other so it looks like a seamless grid of images.
The issue I'm getting is at certain browser sizes or when you resize the browser you get a little 1px gap between certain blocks.
An example can be seen here:
http://dahliacreative.com/responsivegrid/
I think it may be down to the blocks floating as if you take the float off all seems fine.
I tried using display: inline-block etc, but couldn't get anything working!
Does anyone have an idea to fix this ?
This is due to using full round percentages such as 50%, when you get to certain widths and heights (e.g 561px * 393px) then those won't divide into 50% evenly hence this remaining 1px gap.
Have a look at twitter bootstrap CSS to see the percentages done to 6 decimal points to avoid this issue.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* TO FIX 1px Foundation 5 bug fix*/
You can use the new css3 with colum gap and column count.
column-count:
column-gap:
Chris made a really good example with images, which is related to yours.
You can do almost the same thing with li or table or so on elements
Make sure to use prefix and doesn't work in IE less than 10
http://css-tricks.com/seamless-responsive-photo-grid/
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
I'm trying to fill 100% of the viewport in WebKit (Chrome) using maths.
What I'm doing right now is counting the number of elements and dividing that into 100 and then setting all of the widths for the elements to the resulting percentage, following the basic plan of liquid elements.
The problem is that as the number of elements gets very high, but even after the first few are added, there quickly begins to be an issue where a large amount of space opens up on the right of the elements as the browser fights between percentages, pixels, and rounding.
So my question is, how might you go about taking a variable number of elements and ensuring that the entire viewport is filled?
CSS and Javascript are both fair game, but I would prefer to avoid jQuery unless it has an incredibly simple solution. However, if you can only do it through jQuery, even if it's longer, post it anyway and I can see if I can unravel it.
I should stipulate clearly that this solution must work for a liquid layout. The browser and the containing elements must be able to resize down to about 200px. Any solution that depends on cutting apart a known quantity of pixels won't work for me.
I've published a test site if you're not sure what I mean.
display: table to the rescue!
The problem with my initial solution, of course, is that the elements are floated left and then given explicit widths. The upshot is that as the browser rounds the widths to the nearest pixel, you get jumpiness on the right-hand side of the viewport as you slowly gain and loose total pixels.
The beauty of a table is that the browser already knows that each cell should fill exactly its portion of 100% of the table's width. If the table is 100% as wide as the viewport and you have 4 cells each cell will be 25% of the viewport. Add another and the browser gives each cell as close as it can to 20% of the viewport. It handles all rounding for you so at any given time some of the cells may be a pixel bigger than other ones but the difference is always a pixel and the viewport is still filled perfectly.
The only downside I can see is that you need to have elements that you can put stuff in to be able to use display: table-cell because table cells are non-block level elements and can't be given explicit widths. They need content in order to display. Luckily for me, I can have a ul with li elements filled with a elements and thus I can hang the CSS nicely.
For the list
<ul class="mess">
<li class="mess-part"></li>
<li class="mess-part"></li>
<li class="mess-part"></li>
<li class="mess-part"></li>
</ul>
You need to apply the styles
.mess { display: table; height: 300px; width: 100%; margin: 0; padding: 0; }
.mess-part { display: table-cell; height: 100%; }
And you get a nice, pretty, 100% wide, always filled, liquid-layout spread of elements.
I've published an interactive version of the fix.
Pretty neat, eh?
HT to this question for getting the gears in my head turning.
Maybe because for example 5.4% is rounded to bottom, so if you got 10 elements, which all miss 0.4% you are missing 4% of the page, so if you got 20 elements, your missing 8% and so on. Maybe if you Math.ceil 1 element and Math.floor the next one. You will have less white space on the right side. Because you then only miss 0.2% each 2 elements. But still generating a white space.
What is the best solution is to not use % but us PX. Because those are round to PX instead of % which is a lot more. But then still you can use Math.ceil and Math.floor to fix the floating point numbers and have no white spaces anymore.
I'm developing a site using 960gs and I'm running into some troubles. I want to display a small (beveled) border between my columns. One way (i'm using now) is to give the main container a background-image, but this means I have to manually make images for 2, 3 or more columns. I rather set a background to the columns themselves, but this would mean that I have to get rid of the margin. What would be the neatest approach to handle this?
Thanks,
J.
go to the 960.gs site and click generate css. u can then edit the column width there and make the columns a little smaller to accommodate the bevel width on both sides
Yes, avoid using images whenever possible, specially for things like this. If for example, you have 3 columns, 300px each, 30px of margin between them:
column 1 - 300px wide
column 2 - 300px wide, margin:0 30px (left and right = 30)
column 3 - 300px wide
Just change the rules a bit and give that central column the borders, for example
column2 {border-left:1px dashed #ccc; border-right:1px dashed #ccc; margin:0 29px;}
By reducing the margin by 1 px you make space for the space now taken up by the borders