Menu
I have a big <div> with three little <div>'s inside of it, inline. They each have 33% width, but that causes some alignment problems because 3 * 33% != 100%. What is the best way to represent a perfect third in CSS like this? Maybe just 33.33%?
205
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
To achieve this CSS border-top-width property or CSS border-bottom-width property are used in CSS. Divide Width Classes: divide-x: This class is used to set the x-axis divide. divide-x-reverse: This class is used to set the x-axis reverse divide.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.
Clearly, there is nothing right or wrong. With pixels, it is easy to position objects relative to each other and controls specific heights and widths. On the other hand, scaling objects with percentages is easy. % Is the way to go in a modern world like vector graphics.
Now that calc is widely supported among modern browsers, you can use:
#myDiv { width: calc(100% / 3); } Or you can use this as a fallback if your browser wouldn't support it:
#myDivWithFallback { width: 33.33%; width: calc(100% / 3); } 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
