making distance among wigdet

how to make distance among widget ?
code :
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;     
  background: #ffffff;
  border:1px solid $bordercolor;
}

.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

.sidebar .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }


[attachment deleted by admin]

fariz_aja

You will need to experiment a bit. Some of our mods with more coding experience than I have are not back yet, but you might try changing .sidebar .widget padding to 2.5 to see what happens. If that does not work, put it back to 1.5 and then try the line-height in .sidebar.

Steve

haven't available distance sidebar01's, 02 and 03 bgcolor black.
my blog is http://fariz-myblog.blogspot.com/

new code :
#sidewrapper {
max-width: 500px;
float: right;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}

#sidebar {
width: 350px;
margin: 0px 5px 0px 0px;
padding: 15px 15px 0px 15px;
color: $sidebarTextColor;
line-height: 1.6em;
background: none;
/*background: $sidebarbgColor;*/
border-left: 1px solid $sidebarBorderColor;
border-right: 1px solid $sidebarBorderColor;
/*border:1px solid $bordercolor;  */                       
}

#sidebar .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 35px 0px;
background: #ffffff;
}

#sidebar h2 {
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color: $sidebarHeaderColor;
font: $sidebarHeaderFont;
/*background: $sidebarHeaderBgColor;*/
border-bottom: 2px solid $sidebarHeaderBorderColor;
}

.sidebar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 8px 0px 8px 0px;
border-bottom: 1px solid $sidebarListLineColor;
}

#sidebar a {
color: $sidebarLinkColor;
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
color: #000000;         
}

#sidebar a:visited {
text-decoration: none;
color: #000000; 
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

fariz_aja

#sidebar h2 {
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color: $sidebarHeaderColor;
font: $sidebarHeaderFont;
/*background: $sidebarHeaderBgColor;*/
border-bottom: 2px solid $sidebarHeaderBorderColor;
}
It's nice!

Emilio123

this image from my blog....

[attachment deleted by admin]

fariz_aja

 
what is answer ?

fariz_aja

Add a margin to the bottom of the widgets.

Margins can be set in multiple ways.
Here are some examples:

The margin property can have from one to four values.

    * margin:25px 50px 75px 100px;
          top margin is 25px
          right margin is 50px
          bottom margin is 75px
          left margin is 100px

    * margin:25px 50px 75px;
          top margin is 25px
          right and left margins are 50px
          bottom margin is 75px

    * margin:25px 50px;
          top and bottom margins are 25px
           right and left margins are 50px

    * margin:25px;
         all four margins are 25px

The above example use pixel as the unit of measure, you're using em (see below) and they are defined as:
          top margin is 0
          right and left margins are 0
          bottom margin is 1.5em

.sidebar .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

If you want to increase the distance between widgets, just increase the value of the third digit from 1.5 to a larger number such as 1.7 or 2 etc.

Hope this helps!

Stratman

Thanks for helping him, Stratman.

This also is being moved to Template Design/coding.

Steve

Thanks for helping him, Stratman.

No problem, I just hope he comes back for his answer. In the past, I've had quite a few threads I post answers too and as far as I can tell the OP never returns and the thread gets buried.

Stratman

Hey Thur,

Glad to see you back!  You make it too easy for him.

Stratman

thank you …
my intention is colour background is not white but black #
this blog in origin http://fariz-myblog.blogspot.com/

I want widget as hereunder....


[attachment deleted by admin]

fariz_aja

are not as it ....

[attachment deleted by admin]

fariz_aja

Sorry, I'm not understanding your question. If you are looking for the gray area to be taller, then Thur's answer will create the effect you are looking for. Are you wanting to change the width from side to side of your widgets?

Stratman

Thank's Thur Broeders 
Thank's Stratman and Steve 

Now it is OK 

fariz_aja

we need to learn more about css.. like me ^_^.. great topic

neptunose