Use a white space to match all descendants of an element: div.dropdown * { color: red; } x y matches every element y that is inside x, however deeply nested it may be – children, grandchildren and so on. The asterisk * matches any element. Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors
Apply the following CSS: html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } Edit: Added margin: 0; to body declaration per comments (Martin). Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
Add position: relative to #over as shown in this snippet: #over { width: 600px; z-index: 10; position: relative; } #under { position: fixed; top: 14px; width: 415px; left: 53px; border: 1px solid; height: 10%; background: #f0f; z-index: 1; } <!DOCTYPE html> <html> <body> <div id=”over”><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod … Read more
Applies to Bootstrap 3 only. Ignoring the letters (xs, sm, md, lg) for now, I’ll start with just the numbers… the numbers (1-12) represent a portion of the total width of any div all divs are divided into 12 columns so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 … Read more
Found an alternative at Child elements with margins within DIVs You can also add: .parent { overflow: auto; } or: .parent { overflow: hidden; } This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse: .parent { padding-top: 1px; margin-top: -1px; … Read more
display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.1 There is absolutely no … Read more
Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* … Read more
Do this: box-shadow: 0 4px 2px -2px gray; It’s actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.
Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin. To solve this, instead create a new class “top-buffer” that adds the standard margin that you need. .top-buffer { margin-top:20px; } And then use … Read more
Yes, you can use the shadow spread property of the box-shadow rule: .myDiv { border: 1px solid #333; width: 100px; height: 100px; box-shadow: 10px 0 5px -2px #888; } <div class=”myDiv”></div> The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that … Read more