Reduce Gap Between DIVs

HTML & CSS
1

I have several divs with large gap between them, Column 2. Would like to reduce it to as small as gap in Column 1. Do you have any idea how to push row for “Ref No.:” down so as any left side block is inline with right side block in Column 1?

<div class="speczcenter">
<p><span class="detn">Experience:</span><span class="det"> 5 yrs exp </span></p></div>
<div class="speczcenter">
<p><span class="detn">Work Type:</span><span class="det"> Full time </span></p></div>


.speczleft, .speczcenter {
	width: 202px;
	float: left
}
.speczleft p span.det, .speczcenter p span.det, .speczright p span.det {
/*	height: 13px;*/
  min-height:13px;
	width: 109px;
	padding: 3px 0 2px;
	display: block;
	float: right;
	margin: 0 2px 2px 0;
	background: #e3e3e3;
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 2px 1px white;
	-moz-box-shadow: inset 0 0 2px 1px white;
	box-shadow: inset 0 0 2px 1px white;
	color: #333;
	font-size:11px;
	font-weight:600;
	line-height: 1;
	text-align: center;
	text-shadow: 0 -1px 1px white;
}
.speczleft p span.detn, .speczcenter p span.detn, .speczright p span.detnwide {
	padding: 3px 0 2px;
	float: left;
	display: block;
	width: 85px;
	height: 13px;
	margin: 0 2px 2px 0;
	color: #fff;
	font-size:11px;
	font-weight:600;
/*	text-transform: uppercase;*/
	line-height: 1;
	text-align: center;
	text-shadow: 0 -1px 0 #333;
	background-color: #759ae9;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #77b400), color-stop(25%, #5d8d00), color-stop(75%, #476c00), color-stop(100%, #507800));
	background-image: -webkit-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: -moz-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: -ms-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: -o-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	border: 1px solid #4b6619;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 0 2px 0 #b4ff0d;
	-moz-box-shadow: inset 0 0 2px 0 #b4ff0d;
	box-shadow: inset 0 0 2px 0 #b4ff0d;
}
2

Yes, thanks to the fiddle (and Firebug) it is easy tracking. :slight_smile:

For column 1 the culprits are the 2 floats inside the <p>. The left float of the next <p> is moving in the left gap of the right float of the previous <p>, if the right float of the previous is larger than his neighbor.
To avoid this, add:

[INDENT]p {overflow: hidden}[/INDENT]

Then the L and R float of the same <p> are inside the <p> (= the <p> is extending to the largest float).

=======
For column 2 it is the default style for a <p> that is the culprit (automatic applied margin and/or padding by the browser).
You can add:

[INDENT]p {margin: 0; padding: 0;}[/INDENT]

=======
So together it can be:

.speczcenter p {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Then other paragraphs will still have their default margin/padding.

  • Note 1: It seems column 1 is not hit by the auto-margin/padding of the paragraphs. But that is fake. If you only set the {overflow:hidden}, then column 1 is showing the gaps too, because there is no space for the left items to jump upstairs! :wink:
  • Note 2: If you remove the <br class=“clear”>, then column 2 will start at the same height as column 1. The class=“clear” is not defined, otherwise column 2 would be under column 1; at the moment it acts as a normal <br>.
  • Note 3: The easy construction of column 1 is the best: then you don’t need all classes “speczcenter” again and again for each couple of items. :slight_smile:
3

Thank you. Both columns are exactly same by using :

.speczcenter p {
    margin: 0;
    padding: 0;
    overflow: hidden;
}