I am using the following code to center align my webpage,
#parent{
margin:0 auto;
width: 960px;
}
<div id="parent">
<!--more code goes here-->
</div>
The properties have moved to all of the child div's causing them to be center aligned. I am not a CSS coder but I rememeber there is a trick to make the parent div elements to stick to the parent div only. Please help. Thanks
#parent{
margin: 0 auto;
width: 960px;
}
#parent * {
margin: 0;
width: auto;
}
#parent{
margin:0 auto;
width: 960px;
}
#child{
margin:0;
width: 960px;
}
<div id="parent">
<div id="child">
<!--more code goes here-->
</div>
</div>
would work, right?
What I usually do to avoid having children inherit properties is have one parent with two children. I make identical divs for each of the children. Then, I give one of those divs the properties you DO NOT want the other children to have, like opacity or others. After that, I put the regular children layout divs and content into child number 2. That way, the undesirable properties become sibling properties, and not inherited.
The margin and width properties are not inherited (except via the use of the inherit value). However, an inner element appears by default within the outer element visually, so it may look like it inherited those properties. In reality, e.g. margin-left is 0 (by default), but this means that the element starts at the same horizontal position as its parent. Similarly, width is auto for block elements that have no width set on them, and this means the available horizontal space.
The fix to your problem depends on what the problem is. There is no inheritance problem for these properties. But if you wish to make e.g. a child of a centered element start at the very left of the browser window, you need to e.g. set negative margin on it or to use absolute positioning.
For many other properties, such as color, an element inherits the property from its parent if the property is not set on the element itself. If inheritance is not desirable, set the property on the inner element. There is no trick; this is how CSS works.
Related
Children element not stretch parent container.
My code:
html:
<div class='window'>
<div class='wrapper'>
<div class='short'>short</div>
<div class='long'>long</div>
</div>
</div>
css:
.window{
width: 500px;
height: 100px;
overflow: auto;
background: gray;
}
.wrapper{
background: pink;
border: 1px solid red;
}
.long{
width: 700px;
background: beige;
}
example
I want .long stretch his parent .wrapper.
.wrapper width must be the same as .long (700px).
I can reach this by setting float: left to .wrapper.
But what happens here i don't understand, why it helps? What is the mechanism of such behavior? I need explanation, with links to w3c documentation.
What else can i do to extend .wrapper width?
By default, the .wrapper div is inheriting the fixed width you set on .window. You can float the .wrapper and set it's width to auto so the width expands without restriction to the parent.
CSS:
.wrapper {
float: left;
width: auto;
}
Example: http://jsfiddle.net/WTGAc/3/
Theory:
By default, the dimensions of wrapper are constained to the dimensions placed on it's parent, .window.
Floated elements still live within the parameters defined by their
parent element, ie the width available and horizontal position. They
still interact with text and other elements inside that parent element
(or other following elements). In that respect, they are quite
different from absolutely positioned elements, which are removed from
the document flow and don't interact with other elements ... but even
then, if they have a positioned ancestor then they are restricted by
the envelope of that ancestor and will use that as the basis for
calculating size and dimension (although they can still be made to
extend or exist outside that positioned ancestor).
Source of Quote
Since the element is floated and set outside of the normal document flow, it can now expand to the true width of the parent, instead of the fixed width initially defined.
Widths and the CSS Visual Formatting Model
In you example, you have the following:
<div class='window'>
<div class='wrapper'>
<div class='short'>short</div>
<div class='long'>long</div>
</div>
</div>
In the simplest case, .window is the containing block with a fixed width (500px). The child element .wrapper inherits the width from .window. The .long element has a width of 700px and it will trigger an overflow condition. Since .window has overflow: auto declared, the .window element will generate a horizontal scroll bar. Note that by using overflow: auto, .window establishes a new block formatting context, which is why the horizontal scroll bar appears on .window instead of the viewport/root element.
When you float .wrapper to the left, the .wrapper element defines an additional block formatting context. A new block formatting context will ignore the width inherited from its containing block and computes a new width sufficient to enclose the content (shrink-to-fit), which is why the pink background from .wrapper now extends the entire 700px in width.
You can trigger the same effect by adding position: relative to .window and position: absolute to .wrapper. However, this works because you set the height to .window, otherwise, the .window height would compute to zero since absolute elements are out of the flow and (unlike floats) will no longer affect how the .window content is laid out (not contribute to the height in this case).
As an aside, instead of using float: left on .wrapper, you can also try overflow: auto which will also establish a new block formatting context but this time the scrolling bar appears on .wrapper instead of .window.
The relevant documentation from w3.org is:
10 Visual formatting model details
10.3 Calculating widths and margins
10.3.5 Floating, non-replaced elements
Link: http://www.w3.org/TR/CSS2/visudet.html#float-width
I am trying to get an<img> to resize dynamically. Sometimes I need that image to go beyond the box it is bound by, but it seems to stop and distort. Can this be done?
<div>
<img src='smjpg.jpg' />
</div>
div{
width: 20px;
}
img{
width: 100px;
}
Just use CSS for the bounding div.
#imgDiv {
overflow:visible;
}
If you still want the parent container to grow for other elements, with no fixed size, then consider using the float property or position: absolute on the child element. Absolute positioning removes the child from the flow of the page, so the parent container will see nothing to expand around. Floating has a similar visual effect, provided overflow is visible and no clearfix is used, but the child does affect the layout of its siblings. Here's a demo: http://jsfiddle.net/lpd_/rd4HP/3/ (try adjusting the result width).
For instance, the example below.
Html Code:
<body>
<div id="container">
<figure id="abtex">
<img src="images/abtex125.png" />
</figure>
</div>
</body>
CSS code :
#container{
max-width:1050px;
margin: 0 auto;
max-height: 1000px;
}
#abtex {
position: absolute;
top:-100px;
left:400px;
}
#abtex would not follow the #container CSS commands such as the max-width etc right ?
It's about CSS inheritance. Some CSS-properties do get inherited – most don't.
In those cases you'll need to check the specification or some CSS manual.
See: https://developer.mozilla.org/en/CSS/max-width for your specific case. It's noted in the MDN entry, that the max-width property won't get inherited ("Inherited: no").
On the other hand, it's not even necessary to specify a max-width for the child div#abtex, as its maximum width will be the one f the parent element (which again can be manipulated by overflow).
You would need to set a position on the #container element for the child's absolute position to be relative to it.
From the MDN:
absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
In other words, since #container doesn't have a position set, the closest positioned ancestor = the body. Setting position:relative on #container is the typical solution for this.
I have a set of elements inside a parent element. The parent element's height can change (it will be changed by some jQuery files). Here is how the layout looks:
<div class = "parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
I want the child elements to end up aligned at the middle of the parent div, but i can't figure out how to write the css to do so. I have tried writing things like:
.child1 {
...
vertical-align: middle;
}
Which doesn't work. I have also tried:
.parent {
display:table;
}
.child1 {
display:table-cell;
vertical-align:middle;
}
This also doesn't work. Any ideas how to do this?
You can create a wrapper for the elements you wish to center inside a container that gets centered instead like so:
HTML
<div class ="parent">
<div class="centerme">
<div class="child1">
....
</div>
<div class="child2">
....
</div>
</div>
</div>
Then you can simply do this:
CSS
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Demo. Method found over at CSS-tricks.
Check this link : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
this will bring your child div's top to 50% of the container. just add margin-top: -(x)px; where (x) is half of your child div's height.
You have forgotten to apply the same styling on child2 as on child1, like so:
.child1, .child2 {
display:table-cell;
vertical-align:middle;
}
Here is a jsfiddle: http://jsfiddle.net/D853q/1/
This is slightly more complicated than your standard "how do I vertically align a single div inside a parent container."
If you have a multiple number (which can change) of child elements that need to be aligned vertically or if your parent container's height changes, then you will need to use Javsacript/JQuery to set the position as there is no "standard" way to apply a middle vertical alignment to multiple child elements inside a parent container utilizing just CSS.
EDIT: I've been proven wrong, you can apparently with using :before pseudo-element, but it won't work in IE7 unless you hack around it.
I've implemented this in a fiddle: http://jsfiddle.net/rJJah/20/
Key parts
Each Child element has a position:relative. This is important because certain child elements may have variable height, and this eliminates the need to calculate the top position separately for each.
Everytime you change the height of the parent container, you will need to rerun the height calculations and setting the top offset to each child.
Suppose I have this HTML structure:
<div class="a">
<div class="floated-left">...</div>
<div class="floated-left">...</div>
</div>
I have noticed that if I don't set overflow:hidden to .a, then the <div class="a"> does not occupy any vertical size. For example, if I set its background to red, it is not visible at all. Inspecting it with FireBug shows that it's there but of almost no vertical size.
To fix this, I found that I have to set overflow:hidden to .a. Then the first <div> goes over all its content.
Here is a real example:
<html>
<head>
<style>
.a { background-color: red; }
.b { background-color: red; overflow: hidden }
.floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<p>div with class a, that doesn't overflow:hidden:</p>
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
</div>
<div style="clear:both"></div>
<p>div with class b, that does overflow:hidden:</p>
<div class="b">
<div class="floated-left">Hi,</div>
<div class="floated-left">Dad!</div>
</div>
</body>
</html>
Notice how Hi, Mom! does not get red background (no overflow:hidden), while Hi, Dad! does get red background (has overflow:hidden).
Can anyone explain this behaviour?
Here is screenshot of the example:
Thanks, Boda Cydo.
When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.
In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.
Hi, Mom does not get any background because the background comes from the a div, which is height 0 (or near 0). The inner divs are actually overflowing its bounds (which is what floats do by default).
The thing to remember with floats is that they don't have inherent height (when it comes to layout and determining the parent's height). Inline content simply flows around them. So without overflow: hidden the parent div has no height. No height means no background. The floats are still rendered but they go beyond the bounds of the parent div ie the content in the floats is outside the parent div.
Floated elements don't occupy any vertical space for clearing, there are a few ways to fix this, something like:
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
<br style="clear: left;" />
</div>
Would clear after, and make the outer div have a vertical height. Set a border: solid 1px red; on .a to see this in action.
Alternative CSS only solution:
.a:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Per the spec for CSS basic box model:
Margins of a floated box do not
collapse with any other margins.
Margins of a box with ‘overflow’ other
than ‘visible’ do not collapse with
its children's margins.
By providing it the "overflow" property explicitly you have allowed the children to fit into this model, thus the b div no longer has bounds attached to its children. If you apply visible or inherit (which the parent of b is visible by default), the bounds return and the children divs define the margins.
http://www.w3.org/TR/css3-box/ (RE: Example X)