I have a strange problem....
Div should expand to 100% of available space by default, but its not the case.
I don't understand what's going on, even if I put display:block it's behaving as automatic width (relative to content).
I appreciate any help.
Thanks in advance.
http://jsfiddle.net/T3arP/
The effect I need to achieve is let the box with green border absoluted or fixed to top of its container, so you can scroll keywords but title will remain there.
When you absolutely position something (that's using position: absolute or position: fixed) width: auto no longer expands it to the container's width. The rules from which the width is actually determined are complicated*. That's why many people consider it a good practice to set a specific width on those elements (absolutely positioned ones, that is).
*you can find out about those rules at http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width)
As has been said, once you absolutely position an element, it loses the parent's tag association in a sense. So you could do something like this maybe.
http://jsfiddle.net/T3arP/1/
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.
Please look at this fiddle:
http://jsfiddle.net/dyv88/16/
On IE7, if I put width: 100% on a table, inside a div with position:absolute and width unspecified, the table takes over the entire screen.
All more recent browsers, it does not.
Can someone please explain?
And what's the best way to fix this? Do I just need to specify width on all absolute positioned elements? Or is there a better fix with some kind of wrapper element?
If you want to position absolute, it must be relative to the first parent that is positioned. It seems that IE7 doesn't know which parent that is, because you did not specify one.
Do position: relative on one of the parents to fix this. Or position the table relative.
I think specifying width on absolute positioned elements is always a good thing, since absolute positioned elements are taken out of the regular low of the page.
jsFiddle Demo
I have a layout that should have a sidebar on the right hand side of the content area.
The sidebar should display 100% height of its container (#content), but for an unknown reason this content area doesn't have any height, therefore the sidebar isn't appearing.
Any help is appreciated.
Thanks in advance,
Tom
Here's my code:
http://jsfiddle.net/tomperkins/G4f6u/
You are using height: 100% for all elements surrounding it, so it is inheriting the size from the html element. As it doesn't have any size specified, neither does any of the children relying on it.
Use this to make the html and body element fill the window:
html, body { height: 100%; }
I made a few changes dealing with the positioning of the sidebar - which I changed to absolute and added a min-height so that if the contents of it were empty it would still be visible.
Link
Not sure if this is what you were looking for - but it might help.
Set static height on your .content (in px) and you will see the sidebar
Here is an answer from a layman: The problem is that you've got two child <div>s which are both floated, meaning they are outside the regular flow of the document. This causes them to be excluded from the height calculations of their parent, in this case, the <div> with class "content".
You may fix this by adding a <div> after those two floats with style "clear:both" (I believe). This is not the "best" way to fix this particular problem, as it is adding non-semantic markup to your page, but it is fairly easy to understand and implement. Cheers!
Edit: see Container div ignores height of floated elements and then follow the link in the answer to read more.
i have a container div which is position:relative and the squares are position:absolute because i want to play with their positions.
Like what you see, the container does not fit the content except if the squares are positioned in Relative, is there a solution for this?
I don't want to just set the height for container because the squares are not static so i want something that resizes automatically.
Thanks
Unfortunately it is not possible to contain absolute positioned elements..
They are taken completely out of the normal flow, so nothing knows how to wrap around them..
I need a bit more clarity in your question and depiction but I think I catch what you are saying.
I am guessing what is in the image above is what is currently happening but you want the gray, relatively positioned container to "surround" the abolutely positioned containers, wherever they may be?
If so, I would add just one more DIV after all your absolutely positioned containers that has clear:both attributed to it. That's my personal little tip for making sure the parent container hugs all of its kids, no matter where they go running off to.
Hope that helps
If you know the height of the absolutely positioned elements, however, you can set the 'containing' div to a min-height of their top offset plus that known height. Again, it won't contain it in the proper sense, but it will be at least that tall.