Rectangle 27 101

Dark side of the force is a pathway to many abilities some consider to be unnatural.

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});

html - CSS - relative positioned parent div not stretching to absolute...

html css
Rectangle 27 6

clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.

Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.

this does not make the parent div's height grow with the absolute positioned child!

@Nielsm i know, hence why i said "set your child divs to float" (rather than absolute positioned). try reading all of an answer before commenting in future, saves you looking silly.

@Nielsm try adding width:100% to the parent div too (assuming the parent should be 100% width). I think it only works if the browser can detect the parent dimensions. This is however a 3 year old answer, and i haven't done frontend dev work in a long time. Maybe try creating a new question or at least a jsfiddle of your problems as this does work (i have several completed websites to back that up), but as with every fix it needs to be applied correctly and isn't suitable in all situations

@Lee, It's not clear from your answer that you have to do float:left instead of position:absolute. You should edit that.

html - CSS - relative positioned parent div not stretching to absolute...

html css
Rectangle 27 11

Please set parent div to overflow: hidden then in child divs you can set a large amount for padding-bottom. for examplepadding-bottom: 5000px then margin-bottom: -5000px and then all child divs will be the height of the parent. Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}
<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

seems a bit dirty, but worked for me - the only solution on this question. I tried this using twitter bootstrap.

works, but border bottom needs creative approach...

html - CSS - Expand float child DIV height to parent's height - Stack ...

html css layout
Rectangle 27 11

Please set parent div to overflow: hidden then in child divs you can set a large amount for padding-bottom. for examplepadding-bottom: 5000px then margin-bottom: -5000px and then all child divs will be the height of the parent. Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}
<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

seems a bit dirty, but worked for me - the only solution on this question. I tried this using twitter bootstrap.

works, but border bottom needs creative approach...

html - CSS - Expand float child DIV height to parent's height - Stack ...

html css layout
Rectangle 27 4

Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.

Instead, try floating them then have a div with clear: both; after them.

So, my best bet to have the parent div always stretch below the content would be a floating each column left and right, respectively?

You can float them both left, or float them both right, or float one each way that doesn't matter. If you then have a div with clear: both; underneath them (still inside the parent div) your parent div will stretch to the bottom of your two columns.

html - CSS - relative positioned parent div not stretching to absolute...

html css
Rectangle 27 3

The solution might not work in all cases as intended: if you add paragraph to the beginning, the margin is between the paragraph and the child div instead of the parent div and child div,

@Prince I updated the fiddle to allow for the width to adjust. Look at the inline css to see what I did.

@Aleksi You're correct but with the information given, this is an acceptable solution. He could position the p absolutely if need be.

html - CSS Adjust Parent DIV size if Absolute Child DIV falls outside ...

css html relative absolute
Rectangle 27 2

I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!

Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....

This does not solve the problem if absolute divs are required

html - CSS - relative positioned parent div not stretching to absolute...

html css
Rectangle 27 2

The problem is because you are transitioning the container's dimension change but are not applying the equivalent transition to the position change of the bars. Because of this, the bars jump to their new position based on the original size of the container on hover in (meaning, it moves to bottom right as the top and left values are larger) and jump to their original position within the enlarged container on hover out (meaning, it moves to top left as the top and left are smaller). The bars do eventually move to the center at the end of the transition because the container is stretched from all directions.

If you add an equivalent 300ms transition to the bars then all looks fine.

Note that there was still a small jump in the left position of the bar but that can be resolved by adjusting the left position of the container on hover (like I have done in the snippet).

.circle-nav {
  display: block;
  position: fixed;
  width: 44px;
  height: 44px;
  top: 35px;
  left: 35px;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgb(136, 35, 24);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  border-radius: 22px;
  transition: width 300ms ease, height 300ms ease, transform 300ms ease, background 300ms ease, border-radius 300ms ease, box-shadow 300ms ease, top 300ms ease, left 300ms ease;
}
.circle-nav:hover {
  width: 66px;
  height: 66px;
  top: 25px;
  left: 24px; /* changed this to prevent the small adjustment during hover */
  background-color: rgb(187, 53, 39);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 8px 6px rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 33px;
  -moz-border-radius: 33px;
  border-radius: 33px;
}
.top-bar,
.mid-bar,
.bot-bar {
  width: 22px;
  height: 2px;
  position: absolute;
  left: 11px;
  background-color: #fff;
  transition: all 300ms ease; /* added this to prevent the jump */
}
.top-bar {
  top: 14px;
}
.mid-bar {
  top: 21px;
}
.bot-bar {
  top: 28px;
}
.circle-nav:hover .top-bar {
  top: 24px;
}
.circle-nav:hover .mid-bar {
  top: 31px;
}
.circle-nav:hover .bot-bar {
  top: 38px;
}
.circle-nav:hover .top-bar,
.circle-nav:hover .mid-bar,
.circle-nav:hover .bot-bar {
  left: 22px;
}
<div class="circle-nav">
  <div class="top-bar"></div>
  <div class="mid-bar"></div>
  <div class="bot-bar"></div>
</div>

Thank you Harry for this. I opted out of this option and instead am using scale at the moment. But I appreciate the fix. With my menu being a checkbox, I wasn't sure if this was going to work out because of a couple other variables. I will look into this more later.

@Ce.: The solution should work with checkboxes also but scale transform is definitely the better option in my opinion. I assumed that you didn't want to use it for some reason.

css3 - CSS transition on parent div causing absolute child divs to jum...

css css3 css-transitions css-animations
Rectangle 27 21

Make the child (in this case a span) the same line-height as the parent <div>'s height

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>

You should then add the CSS rules

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }

Or you can target it with a child selector

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

I ran into this similar issue where I needed to vertically center items in a mobile menu. I made the div and spans inside the same line height. Note that this is for a meteor project and therefore not using inline css ;)

<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>

CSS (option for multiple spans in a div)

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

In this case if I just had one span I could have added the CSS rule directly to that span.

.intlFlag { line-height: 42px; }

it will not work if text is multiline

html - How to vertically center a inside a div? - Stack Overflo...

html css center
Rectangle 27 7

The issue is because the click event bubbles up the DOM, so clicking on the inner div makes it appear, but then the parent click event fires which immediately hides it again. You need to use stopPropagation() on the click event of the inner div:

$(".popup_header").click(function (e) {
    e.stopPropagation();
    $(this).parent('div').css("display", "none");
});

Also note that you can put all your code inside a sing DOMReady handler.

Seconds... and you added a fiddle before I could give you mine! Demo: jsfiddle.net/raduv118/1

jquery - 'this' parent selector not working - Stack Overflow

jquery css parent children
Rectangle 27 2

Once the elements are positioned, you are able to make the child div overlap the parent's border instead of simply expanding the parent to fit the content. (though why you want to do that is beyond me).

If I'm wrong, could you please explain to me why you want to make the child and parent content overlap rather than simply making the parent expand to properly fit the child? Unless this is for a stylistic overlapping design, I don't see why this is necessary.

If it cannot expand in height, then the child element has to be taken out of the flow of the document so it can overlap the parent document. Use position:absolute for the child, and adjust it w/ left right top or bottom.

That's what I was thinking of doing. It's looking like it will just be much easier to position: absolute the child. Thanks for the help.

@Moses I just found your answer and am trying to use it myself, however, I am having trouble getting the elements to overlap correctly. Can you explain how to ensure that the child overlaps the parent border rather than the other way around? I've tried playing with z-index and haven't made it work

@kat as you can see from the example fiddle, if both the parent and child have position:relative (or absolute) then you don't need z-index, the child will properly overlap the parents border. That is as much help as I can offer. If you still have problems I suggest creating a new question, linking to this question/answer, and explaining why your situation is different that the answer does not work.

css - parent div's border blocking child div - Stack Overflow

css border
Rectangle 27 4

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Good point. How about if the children's height is dependent on the height of the tallest sibling (whether that be determined by the height of the parent or the not), and not the parent? I guess that can't be done in CSS.

No, siblings cannot affect the height of each other. However, display: table + display: table-cell layout will produce the desired result.

Great update! However, I ended up trying this and I wanted to have whitespace separation between the divs/cells and ended up having to make inner divs within the table-cell divs to accomplish that and then of course lost the ability to make them use the full height because the inner divs weren't table-cell divs - exact same problem. Any ideas for that? Kind of missing cell-spacing now.

Ah, there is border-spacing in CSS! stackoverflow.com/questions/339923/ I was able to get my table-like divs working well with whitespace separation by using border-spacing. I now have the ability to make table cells (colored background blocks) use the full height of the parent or not by clever use of the table-cell divs.

float

html - CSS - Expand float child DIV height to parent's height - Stack ...

html css layout
Rectangle 27 4

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Good point. How about if the children's height is dependent on the height of the tallest sibling (whether that be determined by the height of the parent or the not), and not the parent? I guess that can't be done in CSS.

No, siblings cannot affect the height of each other. However, display: table + display: table-cell layout will produce the desired result.

Great update! However, I ended up trying this and I wanted to have whitespace separation between the divs/cells and ended up having to make inner divs within the table-cell divs to accomplish that and then of course lost the ability to make them use the full height because the inner divs weren't table-cell divs - exact same problem. Any ideas for that? Kind of missing cell-spacing now.

Ah, there is border-spacing in CSS! stackoverflow.com/questions/339923/ I was able to get my table-like divs working well with whitespace separation by using border-spacing. I now have the ability to make table cells (colored background blocks) use the full height of the parent or not by clever use of the table-cell divs.

float

html - CSS - Expand float child DIV height to parent's height - Stack ...

html css layout
Rectangle 27 6

This problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solution of the problem:

In your CSS file write the following class called .clearfix along with the pseudo selector :after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
<div class="clearfix">
    <div></div>
    <div></div>
</div>

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.

css - make div's height expand with its content - Stack Overflow

css height
Rectangle 27 3

You need to have parent div (A) with overflow:hidden;position:relative and static height or min-height.

contenteditable="true"
style="position:absolute;width:100%;left:0;top:0"
integer * line-height of div B
span

Get offset().top from this span and compare it with offset().top +outerHeight() from div A. If first is large then second -> you need to scroll down div B.

css top
+= line-height of div B

(if cursor position fails -> you need to previously save it before creating span and restore cursor position after destroying span)

Also you need to emulate all with arrow keys. In that case you need to create switch selector with event.which on keyup in div B. Keycodes are here.

Scroll if cursor position is out from visible range in div A (algorithm similar to what I wrote above)

I've never used that range stuff. Does it work smoothly? Right not I'm doing something simple where on keyup I do scrollTop(0) for div A. It looks glitchy though because the div A scrolls to the cursor at first, then on keyup scrolls back to the top, for every key press.

Rangy standardizes rangy and selection functionality in IE to native (like jQuery). If you know principles of selection and range (this is absolutely different things), it work smoothly.

If you want to cancel default action of pressing key -> you need to bind event on 'keydown' and after all code write 'return false'

This is what I had so far, but it looks glitchy: jsfiddle.net/trusktr/hgkak/5 As you can see, it keeps the cursor past the end of the green div, but before the keyup event fires the cursor is temporarily in view, making it look jumpy. Will you method fix that?

javascript - Is there a way to prevent a contentEditable element from ...

javascript html html5 scroll contenteditable
Rectangle 27 1

You do not need position: absolute for this task.

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol { 
    width: 500px;
    float: left;
}

#rightcol {
    width: 270px;
    position: relative;
    margin-left: 510px;
    text-align: center;
}

This works but doesn't give me the ability to have either right or left column push the parent div's height, however I appreciate your response and I did learn something from your answer.

The height of the parent div should grow with the height of the child divs. you need to leave the clear:both element as in your question's html

html - CSS - relative positioned parent div not stretching to absolute...

html css
Rectangle 27 10

Usually this problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solution of the problem:

In your CSS file write the following class called .clearfix along with the pseudo selector :after

.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="clearfix">
    <div></div>
    <div></div>
</div>

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.

css - Div height 100% and expands to fit content - Stack Overflow

css html height overflow
Rectangle 27 9

Usually this problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solution of the problem:

In your CSS file write the following class called .clearfix along with the pseudo selector :after

.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="clearfix">
    <div></div>
    <div></div>
</div>

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.

css - Div height 100% and expands to fit content - Stack Overflow

css html height overflow
Rectangle 27 57

FWIW, when I ran into this, the problem turned out to be a parent div with -webkit-transform: translate3d(0, 0, 0) in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed.

For what I was trying to do (turning fixed on and off as a way of sticking a key nav element to the top of the page as it scrolled by), the solution was to append it to the page body element when it was time to hold it in place and sticking it back in its wrapper div when it wasn't. No idea if any of this would have helped the OP, but if you're chasing this bug yourself, worth looking into.

Here is a proof of concept demonstrating this annoyance: codepen.io/markdebeer/pen/qrBDm

This only works on Chrome, but not on IE11

OMG thanks...this was driving me INSANE....turns out I did add a transform...its not just the 3d, but I was using translate Y...removed it and fixed acts like its supposed to. I wonder when they are going to fix this because I feel like I have seen this before a while back...its just a pain because I use top:50% and translateY(-50%) to vertically center....

wow, thanks for this answer. I had the same problem. I needed to add translate3d because of a chrome background-color rendering bug (yuck). Of course it's causing more problems now haha

css "fixed" child element positions relative to parent element not to ...

css position fixed