I am working on a layout consisting of several nested Divs and I am ideally looking to get the content areas to stretch the height of the screen. This is pretty simple and I have done it in the past but not in this type of layout and am struggling with it. Instead of me pasting all of the code, I uploaded it to server that can be previewed.
http://www.danyuschick.com/theembalmed/
Any help would be great. I'm at my wit's end with this right now.
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
< percentage >
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
So whenever you use percentages as height the containing block of the element must have an explicit height to be considered.
Look at this link:
http://ninja-code.net/extra/stackoverflow_test.php
It uses a lot less DIV and will expand as you fill content. It also keeps your images as borders along the 'conent' - I wasn't sure if you were wanting it to repeat.
I didn't want to hassle with pushing the footer to the bottom though.
Related
I have a web page as follows (see img)
A certain div has a width of 100% which is filling the whole viewport.
When checking on Chrome, the viewport size is 500px while the CSS size is 536.
Does anyone have an idea why it's different please ?
Thanks.
Cheers,
Many modern visualization techniques, such as parallax, require larger elements than the actual viewport size and a smart usage of transform properties in order to create particular visual effects and/or illusions.
Your picture is actually showing a part of the parent element displaying properties particular to such techniques, clearly showing: -webkit-logical-width:800px and perspective-origin: 400px 300px.
For any element with a position value other than fixed, width:100% usually results into the child having an equal width with the parent, not with the viewport. There are notable exceptions from this rule, though.
If you need a more in-depth explanation as to why does the parent have a different width than the viewport (and it's parent parent, and so on... - all the way to the viewport), you need to post a Minimal, complete and verifiable example and I'll lay down each of the ancestors of your element affecting its width.
If, on the contrary, you don't really need to know what's going on at parents level, but are looking for a way to make your current element as wide as the viewport, you probably want to give it a width value of 100vw.
I have a text box that will expand across the screen when I do not use position: absolute;, however upon using it, the text is all in one column per word, and the box is very tiny.
What is causing this? Or what can cause this? I've been trying overflow settings, different sort of positions and z-indexes, etc.
This is a good question because it highlights an important aspect of absolutely positioned elements.
If you don't specify the width of an absolutely positioned element, or if you don't specify the left and right offsets, then the width is computed to be a shrink-to-fit width similar to what is done for table cells.
The details are given in the CSS specification, Chapter 10: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
There are also some subtle consequences when you place an absolutely positioned element such that it triggers an overflow condition or when one of the edges if out of the view port. In these cases, a absolutely positioned block may have a computed width smaller than you specified.
The key is to consider what type and how much content the block will hold and provide a clear constraint for setting the width, either with a fixed value of a relative value.
Example
If you absolutely position the following:
<div class="abs ex3"><b>Small amount of text:</b> shrink-to-fit</div>
as shown in http://jsfiddle.net/audetwebdesign/SHxPR/, then the computed width of the block will be smaller than the width of the page. The block will expand in width and then height as needed to accommodate more text.
The element where you have position:absolute; is doing as it is expected to do. You should use position:relative; to the parent container for this absolutely positioned element.
I have a list with 3 elements that are a certain size that fit in a container (the <fieldset> that can only hold one list item.
Right now, the other list items are overflowing underneath, I need the to overflow to the right on the x axis.
Here is a picture of what I am talking about:
And here is the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/setup.html
Any ideas on how to achieve this?
Firstly, that is a fairly odd way to use the fieldset element. In my opinion a div (or perhaps a section) element would make much more sense semantically.
Secondly, to achieve the effect I think you're looking for, you'll need to assign a width to the element that contains your three slides (by default the width is set to auto, meaning the element's children will break down to the next line assuming they're block elements). Assign a width of 1200px to the element ul#slides.
Next, set the overflow property to auto on your wrapping element, in your case the fieldset element. This should hopefully get you started on the right track.
I'm trying to produce a layout where I have a div with a percentage height of the body. In addition, I also want to limit this height using max-height.
Inside the parent, I want to create some columns that have further sub-elements, all of which fit within the height (or max-height) of the parent.
Please see this example: http://jsfiddle.net/k6rfr/2/
The problem is that the child elements (with a height of 50% each), match the height of the parent and not the max-height.
Is there any way to make the child elements match the max-height instead of the height?
Though this is not exactly what you might need, it solves your problem:
http://jsfiddle.net/k6rfr/3/
I placed the max-height directy in the child-elements omiting the second wrapper element. The problem you have here is that you have to define the height in two different places.
I think the error is that a given block "outer" height of 60% may not correspond to what you wrote after 300px. It's not correct. If you remove a specified percentage of the height, the blocks would fall into place. Or enter the correct proportion height and max-height.
I have a main container div, where all the important content of the site is inserted, 800px wide, centered horizontally.
I need to put multiple absolute positioned divs layered below it (via z-index) and outside its width, without causing extra scrollbars to appear, and without losing the main container scrollbars (so puting overflow:hidden in a wraper won't do).
In other words, I was wondering if it's possible to create divs with different elements inside (videos, images, or text) that could be treated as backgrounds, so that the scrollbars would only appear when the window resizes below the 800px wide (width of the main container), and the rest of the divs would just bleed out (something similar to what swffit causes with an embebed flash movie).
Is there any way to do this via css or javascript?
Thanks in advance!
There is a way that requires CSS only. I once faced similar problem with this web site I created, take a look at the source. The curves by the side are done this way.
Trick is to change positioning of main container to relative with no shift - that causes change of coordinates base, here is a link. Than use absolute positioning of the "background divs" to get them outside the main box.
To solve the overflow problem use some extra div wrapper (in my site with id graphic). To specify its width use a range - min-width equal to main box and max-width as total width including the "backgound divs". And to this wrapper set the hidden overflow.
Hope it helps.