The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS. That’s why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, … Read more
There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto. From the spec: If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, … Read more
Add border-collapse:collapse to your table rule: table { border-collapse: collapse; } Example table { border-collapse: collapse; } tr { border-bottom: 1pt solid black; } <table> <tr><td>A1</td><td>B1</td><td>C1</td></tr> <tr><td>A2</td><td>B2</td><td>C2</td></tr> <tr><td>A2</td><td>B2</td><td>C2</td></tr> </table> Link
You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example: p { white-space: pre; } <p>hello How are you</p> Note for IE that this only works in IE8+.
For the parent element, add the following properties: .parent { overflow: hidden; position: relative; width: 100%; } then for .child-right these: .child-right { background:green; height: 100%; width: 50%; position: absolute; right: 0; top: 0; } Find more detailed results with CSS examples here and more information about equal height columns here.
TL;DR: use px. The Facts First, it’s extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec. CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. … Read more
Use word-wrap:break-word; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead. Existing uses of word-wrap today still work as it is an alias for overflow-wrap … Read more
Approach 1 – transform translateX/translateY: Example Here / Full Screen Example In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element. .container { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } <div class=”container”> <span>I’m … Read more
A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn’t editable and isn’t sent on submit. Another difference is that readonly elements can be focused (and getting focused when “tabbing” through a form) while disabled elements can’t. Read more about this in this great article or … Read more
Unfortunately this is intentional… This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug: This is completely intentional. It took quite a bit of work on our part to achieve this effect. 🙂 The base problem is this: the … Read more