Google Map API - float div on top - css

I am having issues getting a div to display on top of a Google Map API block.
As far as I can see I have it positioned absolute with a z-index which should place it on top, but I don't see it. It is the .topblock1 div I am looking to appear over the map.
<div class="block4">
<div id="map-canvas">
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
</div>


I have a similar code, try closing your map-canvas div first:
<div class="block4">
<div id="map-canvas"></div>
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>


Make a wrapper around the map canvas, the code of google hide all elemets that are not native.
<div class="wrapper">
<div class="topblock1">
<h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
SEE OUR CURRENT PROJECTS >>
<div class="clear"></div>
</div>
</div>
<div id="map-canvas">
</div>
</div>
And set this css
<style>
.wrapper{ display:block; position:relative; top:0px; left:0px; right: 0px;}
.topblock1{ display:block; position:absolute; top:0px; left:0px; right: 0px; z-index:99999} /* Must be above map-canvas */
</style>

Related

Dynamic flex item width

I made a working example what I want to achieve: Tabs fill up the given space evenly, if the text is too long, it is truncated with ellipsis.
The problem starts, if I wrap it into flex div. (It is a legacy code and part of complex template, and I want ot make as little change as possible)
.box {
border: 2px dotted rgb(96, 139, 168);
}
.box div {
min-width: 0px;
display: flex;
align-items: center;
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
background-color: rgba(96, 139, 168, .2);
}
<script src="https://cdn.tailwindcss.com"></script>
<b>Expected</b>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
<b>Wrong</b>
<div id="wrapper" class="w-full mb-8 flex items-stretch">
<div class='mr-2 flex items-center'>
<a class="truncate">Link 1</a>
<a class="truncate">Link 2</a>
</div>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
</div>
The problem, that in the second example the tabs do not shrink, they expand the viewport with a scrollbar.
Here is the jsbin

You just need to add width and overflow properties to the ".box" div. working example below.
.box {
border: 2px dotted rgb(96, 139, 168);
/* ADD THESE PROPERTIES */
width: 100%;
overflow: hidden;
}
.box div {
min-width: 0px;
display: flex;
align-items: center;
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
background-color: rgba(96, 139, 168, .2);
}
<script src="https://cdn.tailwindcss.com"></script>
<b>Expected</b>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
<b>Wrong</b>
<div id="wrapper" class="w-full mb-8 flex items-stretch">
<div class='mr-2 flex items-center'>
<a class="truncate">Link 1</a>
<a class="truncate">Link 2</a>
</div>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
</div>

Bootstrap Grid and Flexbox, one column with horizontal and vertical scroll

I have a two-column layout page and I want it to meet these requirements:
The right column can contain a large data grid of content and the user should be able to scroll that vertically and horizontally. It's way too much to show it all on the page at once.
The left column, which has a slim width and short height, should always appear on the page for xl screen size.
The left column has two buttons that must appear at the bottom of the page for xl screen size.
The page should be responsive for tablet screen sizes. On tablet, the right column should slide below the left column and should itself still be horizontally scrollable. It's acceptable (though not optimal) for it to retain a vertical scroll bar itself too.
I have this working except for making the right column horizontally scrollable. How can I get a horizontal scroll for the right column?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<div class="container-fluid h-100">
<div class="p-2 h-100">
<div class="row d-flex h-100">
<div class="col-xl-3 col-sm-12 d-flex flex-column h-100 align-items-start">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-auto">
<button href="javascript:void(0)">Button 1</button>
<button href="javascript:void(0)">Button 2</button>
</div>
</div>
<div class="col-xl-9 col-sm-12 d-flex flex-column h-100" align="center">
<h2>Right Column</h2>
<div class="limited mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS:
html, body {
height: 100%
}
.limited {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}

If I follow you correctly, adding
white-space: nowrap;
to that column should let it scroll horizontally and not wrap the text.

How to get background image to cover entire screen when in a smaller div

I have a <div class="container"> that covers 60% of the screen. How would i use background on class background and have it cover entire screen?
<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>
<style>
.container {
width=60%;
}
.background {
background-image: url("img.jpg");
/*???*/
}
</style>
I dont want to put everything to separate divs.

.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>

inherit and individual styles in css

I am making a newsletter for emails. That contains of 30 columns that all have th following class:
.content-text {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
Each column need to have the above class, but each column need to have different background colors. Example:
.column--left__content {
background-color: #bebab1;
}
So that would say that column--left__content should inherit everything from content-text. How can I do that the best way?
HTML
<table class="row">
<tbody>
<tr>
<th class="small-12 large-1 columns first first--column__color " style="width:1%;">
<table>
<tr>
<th>
<p></p>
</th>
</tr>
</table>
</th>
<!-- Here is how I solved this until now -->
<th class="small-12 large-5 columns first content-text column--left__content">
<table >
<tr>
<th>
<h5><strong>This is headline 1</strong></h5>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
At the moment I am calling the content-text and column--left__content in the sam <th>, which does not look so nice.
The best practice for doing this, how would that be? I am thinking that fx column--left__content have to inherit .content-text, but have individually styles also?
EDIT
The

One possible way is to use the nth-child selector in CSS.
.wrapper {
color:#fff;
background-color:none;
width:50%;
height:3rem;
line-height:3rem;
font-size:1.5rem;
}
.wrapper p {
padding:0 0 0 1rem;
}
.wrapper p:nth-child(1) {
background: red;
}
.wrapper p:nth-child(2) {
background: green;
}
.wrapper p:nth-child(3) {
background: brown;
}
<div class="wrapper">
<p> col 1</p>
<p> col 2</p>
<p> col 3</p>
</div>
Another possible way is to create your own background-color helper classes in order to use whenever you want to and not only to use for this case.
.wrapper {
color:#fff;
background-color:none;
width:50%;
height:3rem;
line-height:3rem;
font-size:1.5rem;
}
.wrapper p {
padding:0 0 0 1rem;
}
.bg_red {
background: red;
}
.bg_green {
background: green;
}
.bg_brown {
background: brown;
}
<div class="wrapper">
<p class="bg_red"> col 1</p>
<p class="bg_green"> col 2</p>
<p class="bg_brown"> col 3</p>
</div>
There is a 3rd way that has to do with a small jQuery plugin i have made once (i have not updated it though :) since there was no real usage). But the concept is to use simple helper classes for text-color and background-color in your syntax. The rest is done by the plugin. The class that have to just be added in your HTML (nothing in CSS is needed) have the prefix (bgDarken-,bgLighten-,txtDarken-,txtLighten-) and are followed by a number between 1 and 256. Check the results in the snippet.
You can find it here, there are two examples one using Bootstrap (and is posted here in the snippet), and one using Materialize framework.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jLightenDarken Demo with Bootstrap Framework integration.</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
color:#fff;
background-color:#ffffff;
}
div.alert, div.panel {
background-color:#2196f3;
color:#ffffff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="panel panel-default bgDarken-4">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-4 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-8">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-8 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-16">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-24">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-40">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-48">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-64">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-80">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-96">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-124">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-140">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-148">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-156">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-164">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-192">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-224">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
<div class="panel panel-default bgDarken-255">
<div class="panel-body">
Lorem ipsum
</div>
<div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="alert alert-info bgLighten-16"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-24"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-40"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-48"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-56"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-64"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-80"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-96"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-124 txtDarken-124"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-156 txtDarken-156"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-164 txtDarken-164"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-180 txtDarken-180"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-192 txtDarken-196"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-216 txtDarken-224"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-232 txtDarken-248"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-256 txtDarken-256"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">!function(n){function t(n){return null==n||""==n||"rgba(0, 0, 0, 0)"===n||"transparent"===n}function o(n){var i=n.parent(),r=n.css("background-color");return t(r)&&(r=i&&null!=i?o(i):""),r}function r(n){var i=n.parent(),o=n.css("color");return t(o)&&(o=i&&null!=i?r(i):""),o}function s(n){var t=n.split("-"),i=[];return 2==t.length?(i.functionality=t[0],i.amount=parseInt(t[1]),i):void 0}function l(t){var o,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"txtLighten"==t&&(e=1),"txtDarken"==t&&(e=-1),o=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(o,function(){for($klassKolor=r(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(o,function(t){n(this).css("color",u[t])})}function a(t){var r,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"bgLighten"==t&&(e=1),"bgDarken"==t&&(e=-1),r=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(r,function(){for($klassKolor=o(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(r,function(t){n(this).css("background-color",u[t])})}n.fn.jLightenDarken=function(){l("txtLighten"),l("txtDarken"),a("bgLighten"),a("bgDarken")}}(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('body').jLightenDarken();
});
</script>
</body>
</html>
Summing up, depending on what you really want each one of those or any other answer presented by other SO users could be the best (or not) solution for YOU.

Assuming you HTML is as follow:
<section class="wrapper">
<div class="col1"> col 1</div>
<div class="col2"> col 2</div>
<div class="col3"> col 3</div>
</section>
your CSS could be like this:
.wrapper > div {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
and have a color for each class:
.col1 {
background-color: red;
}
.col2 {
background-color: green;
}
I hope it helps

One good Choice would be too use CSS Less . You can use #extend concept of CSS Less.
.contest-test {
.context-text(); /* Copies everything from .context-text down here */
border: 1px solid red;
}
Follow this Link here

First: if every single iteration of an element has the same class, you're doing things wrong.
Second: You can easily fix your problem by not assigning a class, but giving the base CSS to the element itself.
For instance something like this:
th {
padding: 10px 10px 10px 10px !important;
font-size: 16px;
line-height: 1.3;
}
And then you just add the background-color classes as you need them.

Responsive 3 columns layout with different height blocks

I would like to build a responsive 3-columns layout. For large screens I have 3 columns, reduced to 2 for medium and to 1 for small screens. Blocks contain text, so they have different height. My goal is to create a line of blocks aligned to the top (this illustration refers to 3-columns layout but principle is valid for 2-columns too).
But my best result is the following
Pretty different, yes. I think the problem is that I am not able to create virtual "lines" of blocks, where I can align 1-2-3 and 4-5-6 to the top. Here is my code (I haven't posted it on jsfiddle because effect can be noticed better on wide screens).
HTML
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
.span3 {
float:left;
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:31%;
margin-left:3.5%;
}
.span3:nth-child(3n+1) {
margin-left:0%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:48%;
margin-left:4%;
}
.span3:nth-child(odd) {
margin-left:0%;
}
}
#media only screen and (max-width:500px)
{
.span3 {
width:100%;
margin-left:0%;
}
}
Can anybody help? Thanks in advance.
Note I know there are tons of frameworks with this feature (like in this question), but if possible I would prefer to keep my own code.

In Bootstrap 2.x, you can do this..
<div class="row">
<div class="span4">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="clearfix"></div>
<div class="span4">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Demo: http://www.bootply.com/120857

i put a row class in each row. here is the code
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
and float it left and put margin buttom
whole code is here
http://jsfiddle.net/ndEUS/

Now its working if u use 3 times clear:both but I rly dont know why is needed use there 3x.
http://jsfiddle.net/LmPwe/
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Find it out! Super simple and effective.
CSS
.span3 {
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align:top;
margin-right:-4px;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:33.3%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:50%;
}
}
#media only screen and (max-width:500px)
{
.span3{
width:100%;
}
}
Hope it can help somebody.

Resources