I have a div named 'post-wrap'. I have the height for this div set to auto. But, for some reason, I cannot get it to grow when content is added. What am I doing wrong? Does it have to do with the floats?
http://jsfiddle.net/h8gSV/
Your parent element, post-top has its height fixed at 50px.
You have set a height to #post-top, which encloses all other elements. Thus your height is always 50px. And yes you need to clear the floats:
#post-top {
width: 580px;
overflow: hidden;
}
You need to add a clearfix class to #post-wrap and remove the height:50px from #post-user.
Fiddle: http://jsfiddle.net/kboucher/rH4h5/
Related
I added a min-height on a div in a flex layout parent. It seems that the min-height impacts the div if its real height is greater than min-height.
Take below code as an example:
https://codepen.io/zhaoyi0113/pen/ejwJGM
I set 100px as min-height on the div but it gets overlay each other if its real height is greater than 100. In above case, I expect the div shows hello world in one block but it doesn't. If you inspect the dom structure you will find that the <p> doesn't extend its parent div height. How can I fix it?
Since you've set height 200px on the .div1 flex box tries to fit all the child elements inside 200px, but the min-height prevents it to fit all children within the 200px.
Depending on what you want to achieve you might want to change the height on the .div1 or add flex-shrink: 0 on .div2
try changing the height of the paragraph to inherit.
p {
height: inherit;
}
this will make it inherit the height from its parent.
see the result here
Alternative solution is to add display: table; to your div2.
I am having problems getting my main content div to stretch to full height, the other container is able to stretch to full height.
http://westcountrycreamteas.co.uk/test.html
Is the page I am trying to stretch down and the div that is having problems is inner.
Remove
height: auto !important
from your container div #outer.
Should fix the issue.
You could try
#para {
margin-left: 10%;
height:999px;
overflow:hidden;
}
but i think,the content area shallstretch depending on the content.
Fiddle http://jsfiddle.net/CPfyL/
There is a bug in your outer div. You have set its height using a percentage, but heights can only be set using px. What should you do:
Set the outer div height to a desirable amount, eg: height: 900px;
Set the height of the div you're talking about the same as the outer's one.
i think you want max-height :
div{
height:100%;
}
I have a DIV that has a width of 512px. Then inside that DIV is another DIV. I set the width of THAT DIV to 100%. However, it goes over which is not what I wanted.
I am trying to make it so it stays within the div. As in 5px padding on all sides.
http://jsfiddle.net/weka/USvTC/
This problem is happening because padding and border are not part of width: 100%.
Assuming you do want to absolutely position #exp_wrap, use this: http://jsfiddle.net/thirtydot/USvTC/1/
I removed width: 100% on .bar_wrap/#exp_wrap, and added right:5px; on #exp_wrap.
A block element such as a div defaults to width: auto, and takes the full available horizontal space. This is similar to how width: 100% works, except that padding and border are counted inside width: auto.
If #exp_wrap does not need to be absolutely positioned, use this: http://jsfiddle.net/thirtydot/USvTC/2/
I removed width: 100% on .bar_wrap/#exp_wrap again, and replaced position:absolute; top:5px; left:5px; with margin: 5px;. I also added overflow: hidden to .container to avoid collapsing margins.
Just set the width of the child element to 512-(2*5) pixels in width (502), not 100%.
Maybe the issue is the box-sizing of the child div. You can set it to border-box and then the child div shouldn't be longer than the parent div:
.child-div {
box-sizing: border-box;
}
You can read more here about the box-sizing property.
I tried to center my div using margin: auto like this:
#main-container #control-panel {margin: 10px auto;}
But it still align to the left. I found that I have to specify a width for the div so that it will get centered:
#main-container #control-panel {width: 300px; margin: 10px auto;}
So, is width necessary for centering a div? I thought the width of div should be automatically modified by its inner content? (In this case, I have a button inside the control-panel div)
The result is tested under latest Chrome.
Yes, it's necessary.
The default value for the width of a div is auto, which means that it will try to take up all available space horisontally. As that leaves no margins on the sides, the automatic margins will be zero.
Yes, you have to define width to your div if you want him in center
But in case you didn't want fixed width then just define text-align:center in parent div & define display:inline-block to it like this:
.parent{
text-align:center;
}
.child{
display:inline-block;
text-align:left;
}
check this http://jsfiddle.net/sandeep/HzuYv/
div elements are always, by default, auto (100% wide of the parent container). You want to center that element, and you set margin:0 auto, it'll be centered BUT you won't notice it, because it's 100% wide.
That's why it looks like it's not centered :)
Yes, when using margin-left/margin-right:auto;, you must specify a width for the div.
Without a width a div naturally has an auto width so it is center aligned, but you can't tell as its filling the container.
Yes width is necessary,try this:
#control-panel { width=970px;margin: 0 auto;}
I'm looking for a solution to fit a child div into it's parent's width.
Most solutions I've seen here are not cross-browser compatible (eg. display: table-cell; isn't supported in IE <=8).
The solution is to simply not declare width: 100%.
The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).
See: http://jsfiddle.net/U7PhY/2/
Just in case it's not already clear from my answer: just don't set a width on the child div.
You might instead be interested in box-sizing: border-box.
You can use box-sizing css property, it's crossbrowser(ie8+, and all real browsers) and pretty good solution for such cases:
#childDiv{
box-sizing: border-box;
width: 100%; //or any percentage width you want
padding: 50px;
}
Fiddle
If you put position:relative; on the outer element, the inner element will place itself according to this one. Then a width:auto; on the inner element will be the same as the width of the outer.
In your image you've putting the padding outside the child. This is not the case. Padding adds to the width of an element, so if you add padding and give it a width of 100% it will have a width of 100% + padding. In order to what you are wanting you just need to either add padding to the parent div, or add a margin to the inner div. Because divs are block-level elements they will automatically expand to the width of their parent.
In case you want to use that padding space... then here's something:
http://jsfiddle.net/qD4zd/
All the colors are background colors.
You don't even need width: 100% in your child div:
http://jsfiddle.net/DanielDZC/w2mev/1/