how to restrict the children element inside the parent element in css?


Tags: html,css,css3

Problem :

my css and html code is : https://jsfiddle.net/z2cc11yk/

html:

<div class="progressbar-container">
<div class="progressbar-text">125%</div>
<div class="progressbar-progress" style="background-color: red; width: 100%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>
<div class="progressbar-container">
<div class="progressbar-text">50%</div>
<div class="progressbar-progress" style="background-color: rgb(11, 211, 24); width: 50%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>

css:

 .progressbar-progress{
background-color: rgb(11, 211, 24);
width: inherit;
transition: width 200ms ease 0s;
height: 100%;
position:absolute;

margin:0 10;
z-index: -2;
}
.progressbar-text{
width: 100%;
height: 100%;
position:absolute;
z-index: -1;
}
.progressbar-container{
border-style: solid;
height: 20px;
border-width:1px;
text-align:center;
width: 100%;
}

The issue is I use the absolute position for inside element, as I need to present the text on top of the progress bar.

But I find if 100% filled the childe element is larger than the parents element.

I mean the class progressbar-progress is larger than the progressbar-container. How to restrict inside the progressbar-contain box?

Another question is why the height is filled, while the children elements width is larger than parents element?



Solution :

The width will be fine with position:relative in .progressbar-container and height is given by you only the problem is when you use position:absolute in children element you need to use position:relative in parent element to place the children element according to parent.

.progressbar-progress {
  background-color: rgb(11, 211, 24);
  width: inherit;
  transition: width 200ms ease 0s;
  height: 100%;
  position: absolute;
  max-width: 1849px;
  margin: 0 10;
  z-index: -2;
}
.progressbar-text {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.progressbar-container {
  border-style: solid;
  height: 20px;
  border-width: 1px;
  max-width: 1849px;
  text-align: center;
  width: 100%;
  position:relative
}
<div class="progressbar-container">
  <div class="progressbar-text">125%</div>
  <div class="progressbar-progress" style="background-color: red; width: 100%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>
<div class="progressbar-container">
  <div class="progressbar-text">50%</div>
  <div class="progressbar-progress" style="background-color: rgb(11, 211, 24); width: 50%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>

Till the time position:relative is not there is parent element the child's height width is according to whole body thats why child element is greater then parent element after using position:relative in parent element the child's height width is according to parent div.


    CSS Howto..

    How can I “display:none” to some adjacent text with CSS?

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How to put a border around the text in a button?

    How do I make a paragraph of text display as a square/rectangle in CSS

    How to set multiple css using jquery animate function

    Hover img to show an absolutely positioned div isn't working

    how to position div with css and force text to wrap around

    CSS Clouds - How to adjust to inner content?

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    How to change the Color of dynamically created divs on click event, who are having same class?

    CSS Specificity - how to overlap twitter-bootstrap

    How can I set the Eclipse JS to edit a file as CSS

    How i put css on message of Hibernate validator anotation message of spring project

    how to make the title bar fixed

    How do I add box shadows when the parent div has a background image?

    css top nav - left nav (menu), title in center, right side (more buttons) - howto?

    How to transform a button into this styled button

    How to crop SVG file within HTML/CSS

    How can I use symbol fonts like marvosym in the browser?

    LESS: how to use dumpLineNumbers

    How to crop/cut off an image so it fits the height of the browser window?

    Coming from Android XML layouts, how to place web page elements in XHTML?

    How to make ASP CheckBoxList labels stay on same line as checkbox

    how to use !important in jQuery animate() function

    How can I resize a background-image to fit my element (without set width) in CSS 2?

    how to make my horizontal css dock navigation to vertical

    How to insert javascript function in css link tag

    how to add a different css to last mysql query result using php

    tinymce how to specify the css file to be used for tinymce in another js file

    How to limit height of div when part of 2 vertical divs in fixed parent div