SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reduce Gap Between DIVs

    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?

    http://jsfiddle.net/yqVz8/1/

    Code:
    <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>
    Code:
    .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. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Yes, thanks to the fiddle (and Firebug) it is easy tracking.

    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:
    p {overflow: hidden}
    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:
    p {margin: 0; padding: 0;}

    =======
    So together it can be:
    Code CSS:
    .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!
    • 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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    Yes, thanks to the fiddle (and Firebug) it is easy tracking.

    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:
    p {overflow: hidden}
    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:
    p {margin: 0; padding: 0;}

    =======
    So together it can be:
    Code CSS:
    .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!
    • 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.
    Thank you. Both columns are exactly same by using :
    Code:
    .speczcenter p {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •