Do you know if I can choose the element which should be used to define relative height for other one?
The height by default will be relatively defined by its parent. Meaning that a nested div with height: 100px; will only ever be as high as the div it is inside of (not accounting for margins/padding).
You can use jQuery to set heights based on other elements.
Related
This question already has answers here:
Difference between static and relative positioning
(7 answers)
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 3 years ago.
Following this link.
It states:
An element with position: relative; is positioned relative to its normal position.
How can we define 'normal position'? Is it in context of parent element or overall screen(viewport)?
"Normal position" is in the context of the DOM, and refers to Normal flow:
First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them.
By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content.
This is explained in further detail in the CSS flow layout:
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken out of flow it works independently.
In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.
It's worth noting that all elements have static positioning by default:
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."
And relative positioning simply allows for modification of the position:
This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position.
Normal Position is the actual position of the element in DOM. If you remove the left property for the div in below example then it will be shifted back to its normal position.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
Hope it helps.!
The normal position refers to the initial position of certain element within the viewport.
You can relatively move (top, right, bottom and left) an object if this object has position: relative set and it will move depending on the starting position of this same element.
Also, let's say you have a parent div with a position set to relative; then. inside of it you have another div with the position set to absolute. This second element will 'absolutely' move in its parent context/size which is the div with the relative position.
Take a look at this link so you have some extra idea of how it works.
I know it seems kinda weird at first but you can easily get it with practice.
Relative means it is relative to the content on the page. If it's in a row with inline set, it is relative to the one beside it - meaning it will be positioned next to it, relative to where a div without any position would normally go.
So if there is nothing on the page, it will flow the same as all other content, and position to the top left by default.
If I have a div element with CSS height set to auto, and all its content height was set to percentage values, then where does the contents of that div based their reference for the height?
Ordinarily, the contents set their height as if they were set to "auto" rather than percentage values.
See under "<percentage>" at http://www.w3.org/TR/CSS2/visudet.html#the-height-property for the full details.
i think inherited css attribute will be based on their direct parent container.
just as a position:absolute element's top,bottom,left,right value will be based on its' direct parent container , instead of root container.
In CSS, if I set the width attribute to 100%, like so:
width: 100%;
If the width of the document is larger than the width of the window (horizontal scrolling), the width of the element is only the width of the window. If I scroll to the right, it gets cut off immediately.
How can I use CSS to set the width of the element to have a min-width of the document width so it doesn't get cut off when scrolling?
Percentage based width is dependent on the width of the parent element. So if you set width 50%, it will be 50% of the parent container. Therefore you need to ensure that all the parent elements are properly sized.
There may be a solution using absolutely positioned elements. However this depends on the position attributes of the parents as well.
There is no construct to get the "document width" on a page (in pure css). You are constrained by parent elements in nearly any case.
However a solution may be achieved with Javascript.
I would suggest you investigate the size of the chain of parent elements with Firebug or another browser debugger.
I am practicing HTML markup and CSS few months ago and now I'm quite understood about web design standards and layouts. I've seen many times on the source of other web layouts which they use position relative on their main Wrapper or Container div.. I want to know the purpose of utilizing this because there is no any physical/visual change appear on that wrapper div.. so what is the purpose behind?
Using position: relative; on a container is done so position: absolute; on descendants will apply to the container element, not the body.
See the position page on learnlayout.com.
http://www.w3.org/wiki/CSS/Properties/position
The relative position will tell the browser to "reserve" the space of the element in the normal document flow, and you can displace the said element in anyway without further affecting document flow (e.g. left: -50%).
Also, the relative position allows inner absolutely positioned children to be position relatively to this element. E.g., if the child element has an absolute position of top: 50px, it will be positioned relatively from the top border of the parent element (who is relatively positioned) by 50px, instead of from the <body> element.
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.