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” />

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