How to prevent a webkit-scrollbar from pushing over the contents of a div?
Did you try putting overflow-y:overlay in the parent div? It works for me in chrome. This page says it works in safari, too.
html
How to add CSS if element has more than one child?
You can’t directly ‘count’ total numbers of elements in CSS, so there’s no way to only apply the class if there’s 2 or more divs (you’d need JavaScript for that). But a possible workaround is to apply the class to all divs in the td… td > div { margin-bottom: 10px; } … and then … Read more
Input text field with only bottom border
Use outline:0 and then set border-bottom input { outline: 0; border-width: 0 0 2px; border-color: blue } input:focus { border-color: green; outline: 1px dotted #000 } <input placeholder=”Text” type=”text” />
2 Spaces or 1 Tab, what’s the standard for indentation in the Rails Community?
2 spaces is generally agreed-upon.
CSS lighten child elements on parent mouseover
Like this? Live Demo Relevant CSS: #container:hover .inner { opacity: 0.8 } HTML: <div id=”container”> <div id=”left” class=”inner”></div> <div id=”right” class=”inner”></div> </div> Irrelevant CSS: #container { width: 300px; padding: 30px; overflow: hidden } .inner { width: 40%; height: 250px; background: #ccc } #left { float: left } #right { float: right } Truly Irrelevant CSS: … Read more
HTML|CSS: Space between input buttons
The line feed between the two <input>s creates a space between them on the page. You have to remove the line feed, or use this trick : <input id=”NeedBtn” class=”PostBtn” type=”button” /><!– –><input id=”ProvBtn” class=”PostBtn” type=”button” />
Centering a Twitter Bootstrap button
Bootstrap has it’s own centering class named text-center. <div class=”span7 text-center”></div>
HTML: How to center align a form
@Lucius and @zyrolasting have it right. However, you will probably need to give the form a specified width for it to work properly. form { margin: 0 auto; width:250px; }
Centered form with material design lite
How about using “mdl-layout-spacer”: See codepen <div class=”mdl-grid”> <div class=”mdl-layout-spacer”></div> <div class=”mdl-cell mdl-cell–4-col”>This div is centered</div> <div class=”mdl-layout-spacer”></div> </div> Or if you prefer a css solution: Add an extra class to the grid containing the column to be centered. See codepen <div class=”mdl-grid center-items”> <div class=”mdl-cell mdl-cell–4-col”>This div is centered</div> </div> .mdl-grid.center-items { justify-content: center; … Read more
Make Bootstrap’s Carousel both center AND responsive?
Now (on Boostrap 3+) it’s simply: .carousel-inner img { margin: auto; }