Geek Answers Handbook

CSS: how to make children fit the width of the parent

I create a parent element with the number of div children elements, which then calculate the width in JavaScript, depending on the data-value attribute.

If I summarize the estimated width for all children, I end up being 100%. But for some reason, the children would not really occupy 100% of the parental width: a part of the white pixels appears immediately after the last child.

This is a script that demonstrates this: http://jsfiddle.net/tqVUy/42/

Chrome and Firefox do this fine, I run into this problem in Safari and Opera (see image below).

Rendered component across different browsers

In addition, the overflow property does not work properly, as the child elements overlap the parent div (again, relevant only in Safari and Opera).

Questions:

  • Is there any other (correct) way to make children suitable for parents?
  • Rounded corners and overflow: hidden for the parent, can I make it the same in all browsers?
+7
source share
2 answers

Added css:

 #component>div{height:100%;} #component>div:first-of-type{border-radius:30px 0 0 30px;} #component>div:last-of-type{border-radius: 30px;}

Edit in js:

 $('#component').children().not(':last').each(function () {

What's happening:
The last div will not float to the left and just fill the remaining space. I added rounded corners to the first and last div to fix the corner question. the last div has a radius of 30px in each corner, because the div is valid behind the other divs (you can see this with the check element)

Demo:
http://jsfiddle.net/tqVUy/48/

+1
source

I also encounter this type of problem. To do this, also set border-radius for the child. Write like this:

 #component > div:first-child{ border-radius:30px 0 0 30px; } #component > div:last-child{ border-radius:0 30px 30px 0; }

Check out http://jsfiddle.net/tqVUy/49/

+2
source

More articles:


All Articles