When using the Grid 960 Framework in FF 3.6.14 OS X 10.5.8,
using CSS shorthand
margin: 50px 0 0 0;
cause the margins to shift down and left. All values must be long hand:
margin-top: 50px;
Has anyone encountered this,if so how and why does it occur?
You're probably overriding a different CSS value, maybe margin: x y z j or sort.
It's better to override CSS with long hand elements, so, you're good.
This is due to the fact it works on column system and it is centered within a certain width of 960px. When u add extra margins. It disrupts the floats etc because it is pushing the content out of the 960px area that is set.
You can go to the 960.gs site and then click generate css which will allow u to edit the margin and column sizes urself and redownload the template. Alternatively you could do it manually edit widths for individual divs but you may have to take away some margin/padding another element to make sure it does not excede the 960px for each row on your site
Related
I have seen a lot of css which uses margin-right: -4px to get rid of the space between inline-divs. Why is -4 being used? And is it going to work everywhere?
-4 is used when the width of a space is 4 pixels. It's completely arbitrary, completely dependent on the font metrics (family, size, etc), and therefore by definition not going to work everywhere.
It's this utterly arbitrary value that makes this one of those workarounds that really highlights the fatal flaw of using inline-blocks for (horizontal) block layout in the first place.
This is how inline-block works. if you want your divs stay in the block but be inline you can use inline-block, there are more tricks to fix this, one of them is margin-left: -4px, you can find more from the link here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I suggest to use CSS Grid to create blocks for layout. Here is a website to find some example for CSS Grid:
https://gridbyexample.com/examples/
I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}
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.