1
Привет, я хочу разместить пробел между календарю div и текстом. Я попытался поставить margin-left на текст, но он не работает и margin-right в календарь div, но, как и ожидалось, он не работает. Может ли кто-нибудь дать мне идеи? Помоги мне, пожалуйста. Я думаю, что причиной проблемы является float:left; в календарь div.Поместите маржу в плавающий div
Вот картинка 
вот мой HTML-код для боковой панели
<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>
вот мой CSS для боковой панели, а также календарным дел.
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;
}
Это работало мэм! Большое спасибо. Но я помню, как я упоминал о своем вопросе. Weird. – nethken