Please look into the
Demo
to get a picture of issue i'm facing.
<div class="row">
<div class="outer cols-md-12">
<div class="inner1">Inner1</div>
<div class="inner2">Inner2</div>
</div>
</div>
I have two div inside a parent div . Parent div is having a height so as first inner div.
I'm giving 100% height from second inner div, but it exceeds the parent boundary.
I have given overflow hidden to fix the issue, but is it the right way or anything else i need to do ?. I'm using bootstrap 3
100% height assumes full height of the parent. In this case, inner2 will take 400px height. This is the reason that it overflows the outer div.
This can be fixed by allotting 50% height each to inner1 and inner2.
.outer {
height:400px;
width:400px;
border:solid 1px red;
}
.inner1 {
height:50%;
width:100%;
border:solid 1px green;
}
.inner2 {
height:50%;
width:100%;
border:solid 1px yellow;
background:beige;
}
Check this fiddle: http://jsfiddle.net/GM9VQ/
Related
Take a look at my snippet.
The parent div has a scrollbar and a child div.
Why is the padding (5px) missing on the right side?
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
<div id="moh">
<div></div>
</div>
To get the bounty I want to know the reason for the missing padding. Maybe there is a name for this phenomenon. Or may it be a browser bug?
It would be excellent to know the part in the CSS or HTML specification which is responsible for the missing padding. But this is not required to get the bounty (Because I know it's hard to find).
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px;
}
#moh div
{
/* width:500px; */
height:50px;
background:green;
}
<html>
<head>
</head>
<body>
<div id="moh">
<div></div>
</div>
</html>
The padding on the right hand side doesn't appear because, the total width of the parent div is 100px(width) + 10px(padding) while the width for the chid div is explicitly set to 500px.
Since the chid div is a block level element and width property greater than that of the parent, it will move past the parent element and hide the right border from the parent div.
Solutions
either remove the width attribute in the child div (so it will take full width of the parent)
or set the width of the parent to at least 500px which is the width of the child element
The reason for this can tell. It's hard to explain, but I'll try. Your" moh " div width value is 100px," moh " in the div width value is 500px. The order of items on Pages is normally left to right. If you do not apply overflow, you see the overflowing sections :
#moh {
background: red;
width: 100px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="moh">
<div></div>
</div>
As you can see, there's an overflow from left to right. when you give overflow, The Overflow will be hidden automatically. So where's the overflow ? (left ? right ? ) That's why it will try to hide everything from the overflow, that is, the part that goes out when it doesn't fit. The part he's trying to hide is in the padding, so that part doesn't show up.
I'm sorry if I said anything that would be misunderstood. Maybe I helped you understand a little bit.
It happens because #moh is 100px and the inner div is 500px. The solution is to set them both to 500px and wrap them with a 3rd div that is limited to 100px with overflow-x.
#wrapper {
overflow-x: auto;
width: 100px;
}
#moh {
background: red;
width: 500px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="wrapper">
<div id="moh">
<div></div>
</div>
</div>
#wrap
{
overflow-x:auto;
width:100px;
}
#inner
{
background:red;
padding: 15px;
width: 500px;
}
#inner div
{
width:500px;
height:100px;
background:green;
}
<div id="wrap">
<div id="inner">
<div></div>
</div>
</div>
one solution would be this:
I had to add some more HTML but hope it solves your problem
It's because of the html behavior of block element like DIV and css overflow property.
By default html elements flow from left to right.
Browsers by Default behavior is -
If parent DIV have any width property (or specific width
inherited) and no css overflow rule is defined, and if child DIV
have defined width which is more than the parent can accommodate,
then it will overflow and will grow beyond the right edge of parent.
To control how Parent Div will deal with overflowing, css overflow
property can be used. overflow:hidden will instruct browser to crop
the exceeding width div at the edge.
overflow-x:auto will instruct browser that, when child element
exceeded width beyond the edge then add scrollbar at x-axis.
So, in the example case above, the child div is having greater width than parent and it is exceeding of the parent. And parent div is having 'overflow-x:auto' rule defined, the scrollbar is appearing upto the edge of parent.
Since padding is inside the edge of the div, it does not considered.
If you want to have padding on all side of the parent div.
Treat the parent div as a grandparent by adding one more div inside a parent and moving child div in it.
On grandparent div you can add required padding and width.
3 On new parent set width:100% which will expand to fit in a grandparent and setting overflow-x:autorule will add scrollbar when the child div expand beyond the parent width.
So, the code will be something like -
#moh
{
background:red;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
div{
box-sizing:border-box;
}
#moh div.moh-container{
width:100%;
overflow-x:auto;
}
<!-- Grand parent Div for padding and width -->
<div id="moh">
<!-- Parent Div width 100% to fit in grandparent and overflow rule -->
<div class='moh-container'>
<!-- child element with exceeding width -->
<div></div>
</div>
</div>
Fiddle -
https://jsfiddle.net/guruling/471ka569/13/
I have an element inside another element, and I would like that inner element to be wider than the parent by a set amount - lets say 40px. So it would look like this if the parent was 500px wide:
But if the parent is 600px wide, for example, I'd like the child to be 640px wide.
Without tying the outer element to any particular width, I'd like the inner element to always be 40px wider than the outer element. Is there a CSS only way to achieve this?
You can use calc for this.
For inner div, just provide following details
.inner {
width: calc(100% + 40px);
}
I don't know about the width increase, but you can give padding of inner div via css which may work for you.
You can give your inner div css like
.innerDiv {
/*padding-right: 20px; */
padding:20px; /*this will give to left and right side 20px padding*/
}
How to increase an width:auto DIV's width by X pixels using pure CSS
you can try this
HTML
<div id="parent">Parent Content
<div id="child">Child content</div>
</div>
CSS
#parent {
width:500px;
min-height:200px;
border:2px solid green;
color:green;
font-weight:bold;
}
#child {
width:100%;
min-height:200px;
padding:0 20px;
border:2px solid red;
color:red;
}
Fiddle Sample
Another Demo
you can use calc functionality in CSS.
div.parent {
height:150px;
width:300px;
background:#f00;
}
div.child {
height:100px;
width:calc(100% + 40px);
z-index:1;
background:#0f0;
}
<div class="parent">
<div class="child"></div>
</div>
Hope this helps
I never have any luck with CSS. I have a dialog which is displayed when the user clicks a button. In this div there is an image, and 2 other divs (containing more elements).
It should all look like the following.
The second columns which contained "Applied Filters" should be on the right of the image, and span the width between the end of the image, and the end of the main container. But instead, it has gone under the image.
See JSFiddle here
Here is the HTML:
<div class="filter_dialog">
<img src="data/images/20140206/0/emma-watson-hot-43.jpg" width="550px" />
<div class="applied_filters">
<p>Applied Filters</p>
</div>
<div class="filters">dsadsa</div>
</div>
CSS:
.filter_dialog {
background-color:#333333;
border:solid 1px #666666;
display:inline-block;
margin:0 auto;
border-radius:15px;
}
.filter_dialog img {
border-radius:15px 15px 0px 0px;
float:left;
}
.applied_filters {
float:left;
background-color:#1a1a1a;
width:100%;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
display:inline-block;
}
You'll need to set a fixed width on the two filters divs. I'd suggest wrapping them in one div with the fixed width, set to float: right, and then float the image left.
You'll need to define widths on the .filter-image and .applied-filter DIVs. See this JSFiddle for an example:
<div class="filter-dialog">
<div class="filter-container">
<div class="filter-image">
<img src="http://aerodesign.okstate.edu/projects/kittyhawk%20page/A_dragon.png" />
</div>
<div class="applied-filters">applied</div>
</div>
<div class="filter-options">options</div>
</div>
100% width means 100% width of the nearest relative/absolute positioned PARENT so no that is not the way to do it.
Solutions:
A) The width of the "Applied Filters" and the image-width are always the same => add it a proper width so it could fit next to each other. could be done like:
img{ max-width: 75% } /*or proper px*/
.filterClass{ width: 24%; } /*or proper px*/
B) The image size is not fixed => use a javascript framework like jQuery to count the current image size and change the .filterClass's width like $('.filterClass').css('width', countedWidth);
example:
<div id="parent">
<div id="top">
</div>
<div id="mid">
</div>
</div>
http://jsfiddle.net/VTNxe/
i want the green div to be under the yellow one, and his height should be always that high to exactly fill the parent div.
exampke: parent-height:300 & yellow height:100 => green-height:200
or : parent-height:350 & yellow height:50 => green-height:300
this should even be if the yellows or the green height is changed dureing runtime with javascript for example.
is it possible to archieve this only with css?
thx
If you want to stick with pixels, I think this is the closest you can get with only css:
#mid{
position:absolute;
background:green;
width:100%;
top:100px;
bottom:0px;
}
http://jsfiddle.net/Pevara/VTNxe/4/
Note that I set the top property the same as the height of the #top div. This means that the height of #top has to be fixed. As you state in your question, you might want to change this height with javascript or something. Perhaps you could consider changing the top at the same time then?
http://jsfiddle.net/VTNxe/1/
Play a bit around with position:absolute;: the #top div is always fixed size at the same place. and then use a height: 100% for the #mid div.
#parent{
position:relative;
border: 1px solid red;
height: 300px;
width: 200px;
}
#top{
position:absolute;
background:yellow;
height: 100px;
width:100%;
top:0px;
bottom:0px;
z-index: 1; /* necessary, else the #mid would lay over it */
}
#mid{
background:green;
width:100%;
height: 100%;
}
The short answer to your question is yes, it is possible to do with just CSS. One way might be to make the green box with a height:100%; and do overflow:hidden; in the parent div. Then changing the height of the yellow will make it look like they vary proportionally.
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div