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.
Related
I've always wondered about this.
Even with media queries, how would I significantly change the placement of things(since I'm not modifying element placement in HTML directly).
For example, if social Facebook/Twitter links appear somewhere in the middle of the page(with their HTML container elements nested in a bunch of other parent tags), how would I go about moving that to the bottom of the page(or, to make it look like they are nested in a different section).
You have at least two options:
Change the positioning of the container element. Instead of static position (default behavior), you can use position: absolute or position: fixed to move it to a totally different place on your page.
Repeat the elements in two different places, and set one of them visible depending on a screen size.
I must add, however, that in a good design such measures are rarely necessary. You do not want to confuse your users by moving the elements to a totally different location. A better approach is to use a responsive grid (for example, changing the layout from three columns to two, or from two to one, when a screen gets smaller), collapse tabs into a drop-down list, etc., but keep the position of different elements relatively stable.
Moving to the bottom of the page wouldn't be a big deal. Depending on the parent container, use position:absolute or position:fixed and adjust the z-index of this and the parent container.
However, if you wanted to re-order your containers for specific media queries, you'll either have to give absolute positioning to more elements, adjust your floats, or use Javascript.
If this is a client request, I would personally revisit the wireframe stage and plan your responsive behavior from scratch.
You never ever can assume height of elements for sure from a CSS perspective: user will zoom a bit or a lot, images included or not; images won't appear because of network problem or by user choice, etc. Thus position: absolute is a recipe for future or immediate failure (and fixed not what you're searching for).
You can play with:
flexbox (horizontal or vertical, natural or reverse order)
display: table-(header|footer)-group or display: table-caption along with table-cell and if possible with parent element having display: table (with or without table-layout: fixed) or table-row
floats and Block Formatting Context effects (such a powerful beast)
nope: CSS Grid Layout is IE10 and IE11 only
If you want to move an element from somewhere inside some other element far away both in HTML and visually, then go with JS/jQuery. CSS doesn't allow for complex manipulations. Just make sure that you watch for resize both from and to desktop/mobile resolutions (and allow for initial manipulation and after some AJAX event) and don't fire 100+ events per second when resizing
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/
The Context:
I'm building out a div roster to use with jQuery or PhP for my roleplaying Star Trek Fleet (nerdy, yes, I know). I need my divs to behave in certain ways to make it robust enough to pull from XML and generate the roster automatically and auto-size my divs to fit however many names are added.
It will help to take a look at my current build example with Firebug/the like to understand what I'm doing.
Requirements:
Each subsection (Outpost Personnel, Outpost Defense), needs to have a number of divs:
1) The background image & subsection container (div id= outpostPersonnel in this example)
2) Sub-sub section container for each side of the listing, left and right. (Think newspaper paragraph.)
3) The top n number of roster names needed to fill/align to that background image in requirement 1. (div id= initialCommandTags (left side listing) and initialPersonnelTags (right side listing))
4) Div that stretches with n number of additional roster names. (div id = overflowCommandTags, overflowPersonnelTags, )
5) A colour div stripe to make it look like LCARS is still encapsulating the n number of roster names from requirement 4. (div id = colorStretchLeft)
The Problem:
I cannot get the parent subsection- the div from 1 (outpostPersonnel) to adhere exactly to the height of ALL its child divs- all the way down to the height of the overflowCommandTags/overflowPersonnelTags div.
One way I've tried it, and the next subsection (Outpost Defense) overlaps the overflowCommandTags div. The other- which is the way I have my example now (and where I gave up)- puts a ~160 pixel high blank space between the end of the overflowTags div and the top of the next subsection (outpostDefense).
If you firebug my current build example, you'll see that the parent div (outpostPersonnel) extends way the heck down, even though none of its child divs are that tall.
Overflow:auto and Overflow:hidden are NOT viable solutions insofar as I have read, since I need the divs to expand fully, and WITHOUT a scrollbar.
I'm completely stumped. Watch it be a really simple solution, too. Is it something to do with the fact that the parent div is only a BG, while the child divs have actual content?
Thank you for bearing with me this far!
Cheers!
((Also the reason why my div style stuff is in-line is because I'm embedding this on an Enjin page and I can't call a *.css file.))
There are a few things to mention here but I'll start with the reason for the gap in between the two sections.
From what I can see from your inline styles you have used position: relative and varying top andleft values to achieve the desired layout. On the element with ID personnelContainer you have added top: -230px. This is what is causing the gap.
When you position an element relatively you have to imagine that the element is in its original position and that you've just visually moved it. In other words, moving the element does not change the flow of the page, so applying the negative top value as in your example will not change the height of the container. (good reference: http://reference.sitepoint.com/css/relativepositioning)
With this in mind, you could go the route of applying minus top values to each of the sections that follow in order to close the gap, however you are likely to find that this complicates matters further and leads to overlapping content.
The best advice I can give is to read the following articles on floated layouts:
http://css-tricks.com/all-about-floats/
http://www.quirksmode.org/css/clearing.html
Relative positioning has its applications but in this case you should use the float property to achieve your layout. If you read the articles above it will give you a good grounding in floated layouts and how to ensure your sections contain everything correctly. As long as you don't set any fixed heights on any of the child elements you will find they expand to accommodate any amount of content.
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.