Im stumped as to how to pull a div back in the amount of a gutter. I have 12 columns with two divs. I have a Left div and a right div. The bottom portion of the screenshot is what I would like to achieve, however, I am not sure if my solution is correct and feasible to do.
Currently I have the div sitting at the 4 pos which produces the top portion of the image. I have the red arrow indicating where I would like the div to sit. Below that is the desired affect for reference.
.right {
#include span(9 at 4 of 12);
}
the output of the sass produces this:
.right {
width: 74.57627%;
float: right;
}
I can knockout the float and give it a negative margin-left to line it up but is there another function that i can use and does this mess with the susy???
Many thanks!!
This is a good case for using the spread option in Susy. Spread allows you to say how much a span should overflow adjacent gutters. The default is narrow, which doesn't overflow any gutters. In this case you want wide, to overflow a single gutter. (There is also wider if you need to overflow gutters on both sides)
.right {
#include span(9 wide at 4 of 12);
}
(you can actually add that keyword anywhere in the list of arguments - I just like how this reads)
Related
I want to implement the layout in figure1 using responsive css grid.
Elements A, B, C, D, E - have different content (the content is proportional to the box sizes in the figure below)
the size of each element box should be set according to the content
I'm trying to avoid hard #media statements
I tried to define grid-template-columns with repeat, auto-fill, and fit-content but I'm not getting the desired result
I came across this link that explains that
"Automatic repetitions (auto-fill or auto-fit) cannot be combined with
intrinsic or flexible sizes (e.g. fit-content)"
I also tried to define grid-template-columns with repeat, fixed width, and assign span to the elements: e.g. "grid-column: 1 / span 3;" which also fails to give the desired result.
Is it possible to achieve such layout using css grid?
If not, what are the easiest way to achieve it (nested css grid?, combination of flexbox and css grid?)
Thanks
Personally I would use a series of nested CSS Grids and make use of the grid-area that CSS Grid supports. Then use #media queries to change the grid layout on smaller viewports.
With CSS Grid you can specify actual names for the areas of the grid and assign specific elements to specific areas, then using #media queries you can just move the areas and the content will move automatically when the page is resized.
.my-grid {
display: -ms-grid;
display: grid;
grid-template-areas: "area1 area2" "area3 area2";
}
.my-grid-item-a1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: area1;
}
.my-grid-item-a2 {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
grid-area: area2;
}
.my-grid-item-a3 {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: area3;
}
The above code would produce this grid:
Everything you need can be found here: CSS-Tricks CSS Grid
Note: grid-area isn't supported on Internet Explorer, but you can use AutoPrefixer to get around this.
What the best way to position an element say 2 columns in. Is there a short hand syntax like
span (6 at 2)
Which i've tried but doesn't work.
Or is the correct way to apply a left margin. Also can you get the span count to start from the right?
Thanks
span (6 at 2) works if you are using output: isolate — because isolation calculates position from the left edge for all elements. With the standard float output, you have to push or pull elements where you want them. Those push and pull the element from their default place in the flow (using margins).
#include span(6);
#inlude push(2);
Reduced test case here.
I'm trying to understand why this occurs.
If I have an <a> within an <h2> and set a line height on either the <body> or <h2> the link height is greater than the <h2>.
[Update to clarify] The issue is that .title a has a computed height of 58px, whereas its parent h2.title has a computed height of 50px. I expected them both to have the same computed height. [/update]
I've given them both bottom borders to better illustrate the problem.
[Update 2] I've read over the line-height spec to try and understand this.
From my reading of the spec it seems like an inline element a within a block-level element h2 ought to inherit the parent line-height. I've edited my example here with a larger line-height on the h2. Giving the a a display of inline-block obviously makes it fit, but it still doesn't line through as well as removing line-height altogether (thus using browser default line-height of 1.2).
This is probably not a problem as such, I'd just like to understand the behavior.
[Update 3] I've realised that if I change the line-height of the a to be greater than the h2 the overall height of the h2 box (pink in example above) does increase, so the a is inheriting the line-height from the h2. The confusing thing is that the link height (clickable area) and border-bottom position don't change, whereas the border-bottom on the h2 moves with the line-height.
I don't see your problem. In the link you provide there is absolutely nothing strange. You have a link in a h2. So the font-size of the link gets the font-size of h2. But the a is nowhere bigger than the h2.
It isn't an issue?
However add display:block; to your anchor and it will act more like you expect
you have a h2 containing a link.
the h2 and the link have a line height of 1 (as inherited) but the link has a explicit font size of 3em.
that means, the font size is bigger as the container, which might lead to different results in different browsers.
in Firefox (version 13) the result is, that you have an overflow to the top and the bottom of the parent container (h2).
have you tried removing the margins of the <H3> ? it has default margin to 0.5em in most browsers.
If this was the problem you can read about Reset CSS.
Edit:
you have 2 types of containers, a floted block element with strict fixed height;
and a inline witch has auto hate .. and default margins and spacings (imagin a link as part of a paragraph...).
To get the expected result you can add display:inline-block on the <a>.
So they both will be treated as boxes with fixed height.
http://dabblet.com/gist/5219955
I am having a lot of difficulty using the CSS 3 columns style. I'm using Firefox 3.6 which should support the -moz-column layout.
I have a list of items and I'm trying to render them in 2 columns, top to bottom. To assist my internal sorting algorithm, the very first list item is a sub list.
my css uses this
.container{
-moz-column-width:635; //slightly wider than the list item we're displaying
-moz-column-rule:1px solid;
}
.sub_list{
width:50%;
display:list-item;
}
.item{
overflow:hidden;
padding:0;
margin:0;
display:list-item;
width:634px;
}
Unfortunately my list is displaying as a single column list or a multi column layout where each <li> is marked float:left; but which isn't sufficient since it orders thusly:
1 2
3 4
5 6
This isn't what I need, and it looks absolutely hideous because list item 1 is itself a list.
The examples I have found all seem to order the list items vertically and they don't use any additional tags:
http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html and/or
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions .
Can anybody tell me what I'm doing wrong? Maybe I'm failing to understand the layout engine properly.
It's been requested that I officially "answer" this question so I'm moving my answer from the comment to an answer.
After nearly a full day of research and tinkering I finally tinkered my way to the answer about five minutes after posting the question.
I removed all display/position related styles for .item. Whether or not any of them are actually compatible with Column format I don't know. You'll have to experiement with it or ask someone more knowledgable.
I gave .container a fixed height.
I'm managing to generate a PDF with one line-chart from google-chart, but the quality of the generated columns titles doesn't fit our needs, so I want to generate by myself.
This task should be done using [fo:table] but I'm not able to positionate succesfully the titles (widths and margins/paddings).
In sum up, I want to put the titles using [fo:block] setting the width attribute plus a negative margin (i.e. width="1.5cm" margin-top="-2em"), but the width doesn't take effect.
Do you know how to do it?
Thanks.
The "width" property doesn't apply to fo:block (see http://www.w3.org/TR/xsl11/#fo_block). If you want to redefine the width, you need to use an fo:block-container (http://www.w3.org/TR/xsl11/#fo_block-container) or another element that generates a so-called reference area. It's a bit difficult to understand what exactly your expected layout is. Maybe you can also experiment with using "start-indent" and "end-indent" properties to indirectly influence the actual width of an fo:block. HTH
Finally I have not been able to do that, because [fo:inline] tries to gather all the available space.
One trick is to put margins (left or right) to the 90% or more to fill that gap, but I then have no clue the previous [fo:inline] text was rendered in one, two or more lines.
The only way I found to generate the column's titles is using [fo:table] plus adding margins (left & right) to each cell.
PS: I use FOP-0.95
For FOP you may use tables to set width instead of applying it directly on block.