I want to organize data in two columns of equal width, but they may be different heights per element. It's difficult to explain, but if you have div1 of height 500 and div2 of height 400, then add div3 of any height, it should appear directly below div2 rather than div1 because div2 is shorter. However, if div1 was shorter, div3 would instead appear below it.
Originally I was using tables since it's mostly tabular data, but when one of the two text fields are longer than the either (one in left vs. one in right), it stretches the shorter to match the height. I end up with rows of different height, and the element in the shorter column will stretch to fit that row (which is determined by the taller of either element). I don't want it to stretch, I'd rather it stack to minimize blank space.
Here's a mockup of what I'm trying to achieve. At the top you'll see the page with only one element, then below that you'll see with two elements, then below that with three and four elements. The third element goes below the second element because the overall height of the right column is shorter, but the fourth element goes below the first element because after the third is added, the left column is now shorter.
The only site I can think of off the top of my head that uses a similar organization style is Pinterest.
This concept on the web is usually refered to as Masonry.
Here is a link to a javascript library that can help you implement it.
http://masonry.desandro.com/
This can also be accomplished using FlexBox css for modern Browsers.
That has been addressed in this question: using flexbox to get pinterest or jQuery masonry layout
Related
Difficult to come up with a good title - by all means, change if you can.
Traditionally, a margin on an element can be used to move elements around a page relative to its previous elements. So, if I had a div as a column on my page I could shift elements vertically within that by setting their top-margin CSS property.
This is handy in dynamic pages where some elements might not exist according to given condition, eg, a very simple example here:
https://jsfiddle.net/jhartnoll/4s6pcLu0/1/
I have simply defined a column with a div element, positioned two other div elements and made one of them have a 2em vertical gap between it and its predecessor.
If you remove (or set Display:none) element #one then element #two is shifted up the column and positioned 2em from the top of the column, rather than 2em from element #one which is no longer there.
However, if I try to do a similar thing using a CSS grid, thus making the DOM tree simpler and more flexible, I run into a problem:
https://jsfiddle.net/jhartnoll/xvhycg0k/11/
In this case, the columns are set by the CSS grid so are sort of pseudo columns, but when I set my elements to have margin-top: 2em the margin is calculated from the top of the grid column, not relative to a predecessor element.
Therefore, if element #one is not present, #two simply remains 2em down from the top leaving a gap above...
This behaviour renders margin-top useless, because it is exactly interchangeable with top on relative positioned elements.
Is this a bug with CSS Grid, or am I using it wrong, or is there a way around this?
CSS Grid seems great, but I have run into several problems like this where dynamic content is concerned, if elements have potentially variable heights, or may not be there at all, the Grid leaves other elements floating in space, unable to shift up.
EDIT for clarity of the dynamic problem
Thanks for the comments so far. The problem is not with using the layout, I understand how to set up grids, and rows, define sizes, spaces, span etc, the problem is with dynamic content.
Supposing I have an extremely simple product page:
https://jsfiddle.net/jhartnoll/xvhycg0k/42/
Irrespective of the grid spacing, row/column size etc, the concept is simply that I have thrown in a "Price reduced by 10%" splash element above the product title.
Naturally, product pages would be using templates and therefore the HTML and CSS should be fixed and flexible enough to enable elements to be missing or present.
Not all product pages will display the 10% off deal, so on those pages, I would want the Product Title to shift up into the top element position.
This, as far as I can tell, cannot be achieved with grids.
Similarly, if there was a div which contained a product description and underneath it some product cross promotion or something, the description might be of variable length, so with the div as a column example in the my original question, the content would automatically expand the description grid and shift the cross promotion stuff down the page. Again, this can't be achieved with grids?
So, I was messing around with using a grid defining columns only and simply one row per page so that content could be stacked in columns similarly to the original div as a column example, but then I ran into this margin-top problem which, within a Grid is that margin-top is relative to the grid top, not to the elements above.
So I can't find a way of creating a dynamic website, using a template design which allows for conditional elements and variable element dimensions using Grid and without using Javascript to manipulate on page load.
In my mind, there should be an option for a row-shift property to allow elements to jump down a row if the content is too large, or jump up if there is nothing obstructing it... or something like that anyway!
Hey try the following code I guess it will help your requirement!
#column{display:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;}
#one{background:red;width:2em ; height:2em}
#two{background:blue;width:2em ; height:2em}
<div>
<div id="column">
<div id="one">
</div>
<div id="two">
</div>
</div>
</div>
I have two DIV elements side-by-side, to create two columns. The two elements both have a fixed height of ~200px (calculated based on window height). I would like the content to overflow from the left DIV into the right, ONLY when the first DIV is full.
Unfortunately, I can't use CSS columns, since it automatically balances content across the columns, instead of filling the first column completely before overflowing.
So far the only option I've found (including here on SO) involves JS, and since the content may include HTML (including block elements), the use of JS is just about my least desirable approach.
Thanks in advance :)
You want something called CSS regions and it is only a working draft atm.
"The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions..."
Until then, I'd go with a polyfill.
I'm trying to get more efficient with building responsive websites and since I'm using Bootstrap (not particularly important for this case - I believe), I was looking into Bootsnipp. I decided to view the site's source and noticed one thing I've never seen before: they did not set a height for any of their containers except for the whole page wrapper and the footer. This baffles me because everything falls into place with the website and it's super repsonsive. I understand the elements where they use Bootstrap's classes like "col-sm-4" and whatnot but does anyone understand the art of making the header, a content container, etc calculate heights without specifying in css? Can anyone explain this concept? I tried Googling but not sure of the correct keywords to find answers.
Also, if you need to see yourself, here is the link to their CSS.
Thanks
Understanding the Box Model is important. As an (overly simplified) rule of thumb, you can think of it like this; there are 2 primary types of elements: inline (span, b, strong, ...) and block (div, p, ...).
Block tags by default are width: 100%. That is to say they will naturally stretch to fill their horizontal area.
Inline tags you can think of as being constricting. They shrik to fit the size of their inner elements. This makes sense when you think of a bold tag: it is not unlike highlighting the text you want to be bold. It stays small to fit the content.
In both cases, though, unless you specify a height, both block and inline tags will shrink their height to fit their inner elements. Because of this, you can think of a website as being a bunch of elements stacked on top of each other, where the top of the page is the bottom of the "stack".
Here is an example of divs without specified heights having their heights changed by the size of the interior content. http://jsfiddle.net/S3q2C/ Notice all the divs have a border to easily see its relative size.
If you don't set an explicit height, containers will automatically grow to fit the content (respectively). Sometimes this is desirable, other times not (think overflow hidden). A possible reason why people use explicit heights in containers could be because of absolute positioning, or if they want to align a nested element that is 50px tall, with another that is 200px tall. An explicit height could also be used to maintain perspective say for a picture or other element (maybe a series of elements). While this answer is the end all be all you might be looking for, the key thing I'm trying to pass along is that an explicit height is used when needed, not all the time.
Here's a quick demo showing you two <div> containers, one with a height set, and another with no height.
http://jsfiddle.net/xrZ73/1/
I frequently find myself with a two column layout, in which one column contains all the content and the other contains various extra elements. These need to be somewhat anchored to specific paragraphs in the first column to make any sense. An example:
While it appears to be three continuous columns, it's actually four separate rows, each with three columns -- that is, the first row contains the gallery block, the first paragraph and the "1918" timeline block; the second contains an offset region, the second paragraph and the illustration above the "1925" block, et cetera.
The upsides of this approach are that the extra content pieces (hereafter "blocks") are vertically aligned to the paragraph referencing them and are responsive due to being sized proportionate to the column width. The downsides are that it's not at all semantic, and having blocks taller than the main paragraph will stretch the height of the column and add blank space beneath it (Unless absolutely positioned, which these are).
I could also make it a single 3-column row, with the blocks added to the main content column above the referencing paragraph, and then absolute positioned into the blank space created by the outer columns. This is good in that it's much more semantic, but bad in that block widths won't reflect the column width defined by Bootstrap's grid, and thus are much more difficult to make responsive.
I could do the same but put all the blocks one after another in each column, positioned vertically with bottom margins (or positioned relatively), but this is even more difficult to make responsive given the distance between blocks will change in a responsive layout when the central column is narrowed or widened. I could scale the text at different breakpoints to prevent the paragraph shape from changing, but that would probably reduce readability because I'd need to scale down on smaller devices.
Is there anything I'm missing? Put another way, is there a clean, semantic way of vertically positioning an element in reference to another element?
Could this plugin answer your problems?
http://leafo.net/sticky-kit/
I have 4 elements inside a container element. The container element will have its height set to 100% of the browser window. The 4 inner elements will appear vertically stacked on each other (as normal). The first two elements and the last element should have a "natural" height (ie: enough to fit their contents). The 3rd element should expand to fill the space available in the container, after the other 3 eat all they need to.
So, it would look something like this:
I cannot set explicit heights for Element-1, Element-2, or Element-4, nor do I know the height of the Container. I don't know the natural height of Element-3 either; I plan on using overflow-scroll if it gets larger then what's available. I've added spacing between the elements for illustration, but there will be spacing (margins/padding) between the real elements too.
How do you achieve this using HTML/CSS? If compromises have to be made to get a decent layout, I'll consider them. Bonus points if the technique also applies horizontally (which I've needed on occasion).
First off, great visual.
Secondly.. would a javascript solution be out of the question?
Update
This was just intended to be a sample, but I have updated the code to appease some of the more picky people out there.
http://jsfiddle.net/tsZAV/9/
There are a number of things that make this impossible in pure css.
The browser window could be shorter than the dynamic height of the first 3 elements.
There is no way to force an element to take up the rest of the container's height.
CSS is a document styling language, not a programming language. Think of writing CSS as a set of guidelines that the page should try to follow, rather than a way of explicitly setting sizes (although you can explicitly set sizes).
This is relatively simple to do with JavaScript resizing the fourth element. You'll have to listen for a resize event so that the fourth element gets sized accordingly. Also, you'll want to set a min-height value for element-4, in case there isn't enough space for the fourth element.