Menu
I'm working on vBulletin theme, but on thread list, every thread has 100% for its width but threads are also bigger than their parents, but when i remove border of threads, they will fit parent's div:). so think this problem is on borders.
You can see that better on jsfiddle (thread is white shape with black border)
<body> <div class="after-body"> <div class="body-wrapper"> <div class="threadlist"> <ol class="threads"> <li class="threadbit"><div class="thread"></div></li> <li class="threadbit"><div class="thread"></div></li> </ol> </div> </div> </div> </body> 
210
div is block element. Block elements are 100% width of parent element, if width is not specified. Show activity on this post. it's taking up all the available space based on it's parent container, exactly what it's supposed to do.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%. Show activity on this post. Percentage values simply represent a percentage of the length of the element's container.
In this case, we set the child element's width to be 100% of the viewport width by using a percentage viewport unit (vw), then, we move it to the left side (by the distance of the viewport's half, minus 50% of the width of the parent element) with the left property.
The problem here is that the width is a size of the inner area with text, and the padding with border are "wrapped" around it. That specification makes no sense, but most modern browsers follow it.
Your savior is called box-sizing: border-box;.
.threadbit .thread { /* ... some stuff ... */ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } Look here: jsFiddle
More info on this property here and here.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
