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.
Related
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
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/
Here and there I see suggestions that I should always set width on floated items. But when I'm exploring CSS of popular web-services (such as Twitter/Google), I see that almost nobody does that.
Is it still considered good style to always set width on floated items? In which cases should I set 'width' property and when it can be safely omitted?
Some quotes:
SmashingMagazine says that:
“You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.”
HTML and CSS: Design and Build Websites book says:
When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow).
Well it really depends on the browser, you must check the results in multiple browsers to be sure that none of them "misunderstood" your settings. I'd set a width anyway, because no browser can misunderstood that.
Block element takes the full width of the parent. If you use float it will not take the full width, the width would be how much the element width it is.
i use width with floating elements in percentage of the containing div , the only problem you get is that the containing div might not wrap arround its content , so you have to put on the main div overflow:auto
I have a <div>, inside of which some complicated content is rendered with a scale transform applied. My problem is that the <div> takes up the same space that it would have taken even if no transform was applied. I've made a jsFiddle snippet to illustrate what I mean.
I think I can understand why the behavior is like this, but is there any way to make it so that the container takes as much space as its content with scaling (and other transforms, if possible) applied?
I should note that explicitly setting the width and height of the <div> outside affects the contents of the scaled text (and this is not desired behavior in my case). Putting the scaled content in an <iframe> is something I'd like to avoid.
Without resorting to Javascript, there isn't any way to do this, I don't think. CSS transforms don't affect layout flow for elements near the transformed elements, they only change the coordinate system within that element; so children are affected, but not parents or siblings (MDN has some more detail on this).
There's a great answer here that might be a JS-based partial solution for you: https://stackoverflow.com/a/10913299/2524360
I don't know if this answers your question, but it doesn't seem to accept 0 as a value. The browsers scales from 1, as in 100% to e.g. 4, or 400%.
transform:scale(1,4);
There is a div element I have complete control over, including its contents, associated JS event handlers and style options. This div will be inserted into some web page template I don't know anything about, i.e. it may be inserted into a table cell, or into complex div-based markup, etc. I need to be able to build this div in such a way that would allow it to occupy a predictable area inside the parent elements it's being inserted into.
How many positioning schemes for do I need to support for different use cases?
Are there any restrictions on the web page templates I'd better set so that my div construction subroutine doesn't turn into an unmaintainable mess?
What would be more natural, expanding the div to take 100% of available area, or resizing to the given width and height?
Personally, I would simply set it to fill the parent container (which can be a task in itself in CSS2).
This way, whomever is controlling the template can decide the eventual size of your div by influencing the parent container. If they want it to fill the container, they just leave is as-is - if they want to restrict it or position it in some way, they can place it in a block element and dictate the size/shape/positioning of the block.