I wanted to give all of the child's div elements a background-color of parent div. But, as I see, child divs' style overwrite parent's style even though child's did not have that property. For example,
<!-- Parent's div -->
<div style="background-color:#ADADAD;">
some codes here...
<!-- child's div -->
<div style="position:absolute;font-size:12px; left:600px;top:100px;">
again some codes...
</div>
</div>
In here, If i delete the style of child div, it works fine. I think my problem may be solved if i did the same thing with external css file also. But, I have already done hundreds of divs exactly like this. So, is there anyway to force parent's style to child style, just for background-color?(new in css)
But, as i see, chid divs' style overwrite parent's style even though child's did not have that property.
No, they just don't inherit the value by default, so they get whatever value they would otherwise have (which is usually transparent).
You can (in theory) get what you want with background-color: inherit. That has problems in older versions of IE though.
Use css selectors like this to make the background of child div's inherit from their parent:
Parent's div
<div id="thisparticulardiv">
some codes here...
child's div
<div class="childrendiv">
again some codes...
</div></div>
CSS:
#thisparticulardiv {
background-color:#ADADAD;
...
}
#thisparticulardiv div {
background: inherit;
position:absolute;
font-size:12px;
left:600px;
top:100px;
}
Use the inherit property on the child div :
background:inherit
<div style="position:absolute;font-size:12px; left:600px;top:100px; background:inherit">
Related
I noticed this strange behavior years ago back when I was first learning HTML, and still don't understand it.
Both jsfiddles are based on the following HTML:
<div class="parent">
<div class="child">
Child content
</div>
</div>
In the first jsfiddle, I'm adding a margin-top to the child element, yet the entire parent element shifts downward: http://jsfiddle.net/flyingL123/uUgVz/
In the next jsfiddle, the only thing I'm changing is adding a border to the parent element, and now the parent element no longer shifts down the page: http://jsfiddle.net/flyingL123/uUgVz/1/
Why don't both jsfiddles behave the same? Why is the parent element effected by the margin-top on the child element in the case when the parent element does not have a border?
It is because the childis not empty (height!==0)
<div class="parent">
<div class="child">
Child content
</div>
</div>
is the same as
<div class="parent">
<div></div>
<div class="child">
Child content
</div>
</div>
empty element will be used as wrapper
and adding border to the parent is like saying hey now we want to see something which is the same as just adding a letter:
<div class="parent">
m
<div class="child">
Child content
</div>
</div>
-Demo-
Note that you are applying the style on the parent element and not the child, that means the first and all next notempty childif they dont have a style set will adopt the parent style
It has to do with how block elements are rendered. By default, divs don't hide their contents, it means that anything inside a div that results being larger than its parent would stick out of it, like the margin of your child element, however you can use the overflow: hidden attribute so that the content is limited only to the size of the container, and thus, making your margin to push from the inside of your div, since it can't stick out of it:
See the updated fiddle:
CSS:
.parent{
width:300px;
background-color:#666;
color:white;
overflow: hidden;
}
.child{
margin-top:50px;
}
But in case you still want the children to stick out of the parent but to be pushed down, you can set the container's padding value instead of the child's margin value, see this other fiddle:
CSS:
.parent{
width:300px;
background-color:#666;
color:white;
padding-top: 50px;
}
.child{
/* margin-top:50px; */
}
The effect you described is caused by Margin Collapsing
Go through this Stackoverflow to learn how to remove the margin collapsing.
I'm working on a project using the framework Twitter Bootstrap 3.
My basic HTML layout is.
Sidebar
Main content
The sidebar element has 100% height and float: left so that the div classed main-content stays inline.
When I give the sidebar float left property and add a row classed div in main-content div.
The height of .row goes crazy. But instead of float: left if I use position: fixed to the sidebar then the .row height gets adjusted according to content inside the .row.
I did play with the web console in Chrome and noticed that there are two pseudo elements created on row :before and :after.
When I unchecked the css property of those pseudo classes the height of the .row is to the height of the child.
Why do I have this issue when I use float: left to the sidebar?
How can I overcome it?
Did google on this, and I found this. But it doesn't help me.
Also I've created a fiddle to demonstrate the strange behaviour of the .row classed div where it extends to almost to screen of the height but there's nothing present inside the .row element.
Someone help me to get this clarified and fixed.
Thanks in advance.
EDIT : Why the height of the .row div is 100% when I didn't define it's height?
I find your mark-up a bit odd considering you are working with Bootstrap. Why don't you make use of the Bootstrap functionality to create your sidebar and main content div? This way you also don't run into unwanted "100% height divs".
Have a look: http://jsfiddle.net/GeA7N/3/
<div class="page-container">
<div class="row">
<div class="sidebar col-xs-4">
</div>
<div class="main-content col-xs-8">
<div class="well custom-well"></div>
<div style="background: red">Content div that is not 100% height by default</div>
</div>
</div>
</div>
Have you tried using http://www.layoutit.com as a guide for a layout? You don't have to register to use it. Once you get the columns setup correctly you can go in and and set the height of the columns with the style attribute on the div. Hope this helps a little bit
Children inherit attributes from parents, unless otherwise specified.
So let's specify a height for row and it will no longer inherit.
All I am adding is a row height attribute to overwrite both the parent's height attribute.
.row {
background-color:blue;
height:50%;
}
JSFiddle Demo Blue is to show the row div. The grey is just the underlying background of the page.
EDIT : Why the height of the .row div is 100% when I didn't define
it's height?
Reason: The ::before and ::after pseudo-elements of the .row class have the style display:table; thereby causing your first row to fill as much remaining space as it can.
Solution: To avoid overriding the Bootstrap framework, simply encapsulate your .container class with another div which has the style display:flex;
I have a div with id thdiv with the help of that id. I need to apply css properties over div with id fdiv
I tried this but not able to get the desired result
<div id="fdiv">
Hello
<div id="sdiv">
Anchor
</div>
<div id="thdiv">
Hii
</div>
</div>
div >div {
color:red;
}
If I am not specifying any id then it should change the color of both the child divs. but I need to change the properties of parent div instead of child div.
It is not possible to address the parent of an element only with CSS selectors. You would need some javascript to find the parent of an element.
you can use jquery
$('#thdiv').parent().css({"color":"red"});
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
Here there is the whole example of my divs.
Why doesn't footer get the background color from the parent (container)?
When you float an element, this is like it was disconnected from the parent. So, inherit values cannot be inherited. Also, the parent stops expanding to the children heights. Remove the float and you can see it working.
But if you really need the float, you need to put background-color on footer.
Remember that you can put another <div style="clear: both"></div> after footer like showed on another answer, but it is just a trick to that the parent can follow the child height.
You have to clear the floating div: http://jsfiddle.net/74MvW/14/
It doesn't get the bg color, because the "container" div has the background, but the "footer" div is floating to left, which means that it doesn't affect the "container" div's height.
You have to either get rid of the float or simply add a clearer div after the footer div like this:
<div class="container">
<div class="footer">
Hello
</div>
<div style="clear:both;float:none;"><!-- Clearer --></div>
</div>
As other answers have mentioned, the problem is the float value. The nicest way to get around this is to set the .footer div to "inherit" the parent's background:
.footer {width:910px; height:150px; float:left; background: inherit}
Demo.
Some CSS properties are inherited by default (e.g. font-family); others have default properties. In the case of background-color, the default is transparent. If you want the property to be inherited, you have to say so explicitly.