Simple HTML issue explanation - html

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.

Related

Make a div adjust its height to its absolutely positioned children

I have a div element (default positioning) containing and h1 and a link, both of which have absolute positioning. Naturally, the div elements height collapses. How do I make the div element adjust its height to its two children?
I have tried standard clearfixes, setting overflow to auto and setting the div's position to relative (which was a suggestion from another post i found) but none of them has worked.
I made a jsfiddle that illustrates my problem.
HTML Code:
<div>
<h1>the div doesnt go around this element</h1>
</div>
CSS Code:
div {border: 2px solid;}
h1 {position: absolute;}
Use min-width for div in css such that it covers the height required for children.
I made a jsfiddle helping you to solve this issue using jquery:
https://jsfiddle.net/9hubfbxt/
the html code:
<div id="parent">
<div id="child1" class="child">
</div>
<div id="child2" class="child">
</div>
</div>
the jquery:
var height = 0;
$("#parent .child").each(function() {
height = height + $(this).outerHeight(true);
});
$("#parent").height(height);
Now the height can be anything depending on just whatsever inside.
EDIT:
i edited your jsfiddle with my jquery workaround: https://jsfiddle.net/4yuco4cL/1/

Can you relativlely or absolutely position items in a display:table-cell?

I have a link that I want to always be at the bottom right of the cell it is in. Right now the link is in a < p > element. I tried doing both absolutely and relative positioning but I can get the effect I am looking for.
I have a row with 4 cells, when attempting to apply the absolute position it takes the element to the very last cell on the right... instead of just placing it within the cell it is in. I tried various methods but not sure if I am sure tired or trying to do the impossible.
I am very new to css tables so I could be thinking about this all wrong.
Here is an example:
http://jsfiddle.net/56H5x/1/
The "Learn more" link to the very right should be at the bottom right of the first cell.
Thanks in advance.
While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.
So the child element will be relative to its parent element.
EDITED:
Working JS Fiddle
in Chrome, Safari, Opera and IE
But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.
See the reference:
Edited: Sorry..!! Missed it :). As said by ahsaan, Add position relative to .layout-cell and modify your HTML as below.
.layout-cell {
display: table-cell;
vertical-align: top;
position: relative;
}
.layout-cell div{
position:absolute;
bottom:0;
right:0;
}
<div class="layout-cell columnBody-wrapper curvedBottom">
<p>Column 3</p>
<div><a class="button button" href="#">Learn More</a></div>
</div>
Expanding on Ahsan Rathod's answer to solve this issue in firefox wrap your content inside a div and set your properties on this div rather than the div set as display table-cell
.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}
<div class="cell-div">
<div class="relative-div">
<div class="absolute-el">
<img ... >
</div>
</div>
</div>

Forcing child divs to use parent's style

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">

Problem with float - Css

I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1

IE6 Overflow Issue

<div style="float:left; width:50%;">
div 1
<div style="position:absolute; width:105%">nested element</div>
</div>
<div style="float:left; width:50%;">
div 2
</div
If an element exceeds the width of its floated parent element, the next element is pushed down unless I apply overflow:hidden on both floated elements, which defeats the purpose because I DO NOT want to hide the overflowing content. Is there any fix for it?
You have to make sure the content inside is not wider than the divs to stop the elements being pushed down in this scenario.
You could perhaps put margin-right: -5% on the positioned div to make it's width narrower in the document flow, but it should still display at 105% wide once rendered.
Set it to 100%, not 105% - otherwise, it is simply doing what you told it to do.