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.
Related
I am trying to have a header div inherit its width from its parent. The header div is position: fixed. The parent is contained inside a bootstrap container.
However, as you can see in the code I've created, it is not correctly inheriting the width of its parent - it is adding some extra width from somewhere.
This is all very annoying! Any idea how to fix this?
.category-body {
margin-left: 17% !important;
width: 67%;
background-color: red;
height: 500px;
}
.category-header {
position: fixed;
top: 51px;
width: inherit;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
</div>
</div>
http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe
The problem stems from using a percentage value on the parent width. Browsers seem to have a problem with this. (Tested on Chrome, FF & IE11.)
If you use pixel values the problem goes away.
Revise PLUNKR
From another answer:
It seems as though the static value (250px) can be propagated through
normal inheritance. Whereas when the relative value (90%) is being
used, the fixed div has already been taken out-of-flow, and now
inheritance-wise, it's parent is the viewport.
Learn more here:
position:fixed and width:inherit with percentage parent
How can I make a fixed positioned div inherit width of parent?
Set a Fixed div to 100% width of the parent container
Set width of a "Position: fixed" div relative to parent div
Set width of fixed positioned div relative to his parent having max-width
Fluid width fixed position
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/
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.
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/