title: Put a margin to the floated div
body: <p>Hello i want to put a space between the calendar div and text. I tried to put <code>margin-left</code> on the text but it's not working and <code>margin-right</code> to the calendar div but as expected it's not working. Can someone give me ideas? Help me please. I think the cause of the problem is the <code>float:left;</code> to the div calendar.</p>
  
  <p>Here is the picture
  <a href="https://i.stack.imgur.com/Wv6Tu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wv6Tu.png" alt="enter image description here"></a></p>
  
  <p>here is my html code for the sidebar</p>
  
  <pre><code> &lt;div class="fix sidebar floatright"&gt;
     &lt;div class="fix single_sidebar"&gt;
       &lt;div class="events"&gt;
         &lt;h2&gt;Upcoming events&lt;/h2&gt;
         &lt;hr class="carved"&gt;
         &lt;div class="fix single_popular"&gt;
           &lt;div class="date"&gt;
             &lt;span class="month"&gt;August&lt;/span&gt;
             &lt;h1 class="day"&gt;28&lt;/h1&gt;
           &lt;/div&gt;
           &lt;h2&gt;Vestibum Malesuada Etiam Magna&lt;/h2&gt;
           &lt;p&gt;7:00 AM - 8:00 PM&lt;/p&gt;
         &lt;/div&gt;
         &lt;hr&gt;
         &lt;div class="fix single_popular"&gt;
           &lt;div class="date"&gt;
             &lt;span class="month"&gt;August&lt;/span&gt;
             &lt;h1 class="day"&gt;28&lt;/h1&gt;
           &lt;/div&gt;
           &lt;h2&gt;Vestibum Malesuada Etiam Magna&lt;/h2&gt;
           &lt;p&gt;7:00 AM - 8:00 PM&lt;/p&gt;
         &lt;/div&gt;
         &lt;hr&gt;
         &lt;div class="fix single_popular"&gt;
           &lt;div class="date"&gt;
             &lt;span class="month"&gt;August&lt;/span&gt;
             &lt;h1 class="day"&gt;28&lt;/h1&gt;
           &lt;/div&gt;
           &lt;h2&gt;Vestibum Malesuada Etiam Magna&lt;/h2&gt;
           &lt;p&gt;7:00 AM - 8:00 PM&lt;/p&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>here is my css for the sidebar and also the calendar div.</p>
  
  <pre><code>hr.carved {
    clear: both;
    float: none;
    width: 100%;
    height: 2px;
    border: none;
    background: #ddd;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.5, rgb(126,27,18)),
        color-stop(0.5, rgb(211,45,31))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgb(126,27,18) 50%,
        rgb(211,45,31) 50%
    );
  }
  
  a {
    color:#000;
    text-decoration:none
  }
  a:hover,
  a:focus,
  a:active {
    text-decoration:none;
    outline:none;
  }
  h1,h2,h3,h4,h5,h6 {
    font-weight:normal;
    margin:0 0 15px;
  }
  .floatright {
    float: right;
  }
  .floatleft {
    float: left;
  }
  .fix {
    overflow: hidden;
  }
  .sidebar {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #a92419;
    padding:19px;
    width: 250px;
  }
  .single_sidebar_ {
    margin-bottom: 25px;
    color:#898989;
  }
  .single_sidebar input {
    width: 90%;
  }
  .events &gt; h2,.single_sidebar &gt; h2 {
    color:#a92419;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    padding-bottom: 5px;
  }
  .single_sidebar a {
    display: block;
    color: #898989;
  }
  .single_sidebar a:hover {
    text-decoration: underline;
  }
  .single_popular {
    margin-bottom: 15px;
  }
  .single_popular img {
    margin-right: 8px;
  }
  .single_popular h2 {
    color:#898989;
    font-size: 14px;
    margin-bottom: 0px;
  }
  .single_popular p {
    color: #717171;
    font-size:11px;
    margin-top: 5px;
  }
  
  .date {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    background: #fff;
    text-align: center;
    font-family: 'Helvetica', sans-serif;
    position: relative;
    float: left;
  }
  .date .month {
    background: #a92419;
    display: block;
    padding-bottom: 5px;
    padding-top: 5px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    border-bottom: 2px solid #a92419;
    box-shadow: inset 0 -1px 0 0 #a92419;
  }
  
  .date .day {
    display: block;
    margin: 0;
    padding-bottom: 10px;
    padding-top: 5px;
    text-align: center;
    font-size: 20px;
    color:#a92419;
    box-shadow: 0 0 3px #ccc;
    position: relative;
  }
  
  .date .day::after {
    content: '';
    display: block;
    height: 95%;
    width: 96%;
    position: absolute;
    top: 3px;
    left: 2%;
    z-index: -1;
    box-shadow: 0 0 3px #ccc;
  }
  
  .date .day::before {
    content: '';
    display: block;
    height: 90%;
    width: 90%;
    position: absolute;
    top: 6px;
    left: 5%;
    z-index: -1;
  }
  .events img{
    height: 80px;
    width: 140px;
  }
  </code></pre>