nethken nethken - 5 months ago 8
CSS Question

Put a margin to the floated div

Hello i want to put a space between the calendar div and text. I tried to put

margin-left
on the text but it's not working and
margin-right
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
float:left;
to the div calendar.

Here is the picture
enter image description here

here is my html code for the sidebar

<div class="fix sidebar floatright">
<div class="fix single_sidebar">
<div class="events">
<h2>Upcoming events</h2>
<hr class="carved">
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
<hr>
<div class="fix single_popular">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<h2>Vestibum Malesuada Etiam Magna</h2>
<p>7:00 AM - 8:00 PM</p>
</div>
</div>
</div>
</div>


here is my css for the sidebar and also the calendar div.

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 > h2,.single_sidebar > 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;
}

Answer

you can use margin-right

.date
    {
    margin-right:10px;
    }
Comments