borders problems

[dagash]

hi guys ,
i have a little problem with my css file . some borders are not reached to the end of the div ..

this my markup :

1142013

عنوان التدوينة الأولى

عبدالماجد

14 تعليق

534 مشاهدة

الرحلات التصويرية

نحن والعالم المعاصر متآلفون ومتكاتفون ونساعد بعضنا بعضا ، هنا دنيتنا ، هنا بيتنا ، هنا اهلنا ،، هذا الشارع هو شارعنا ، نحن كا زلنا نعيش هنا ، ونأكل هنا ، ونلعب هنا ،، حينما نتحدث عن المرح يكون الحديث هنا ، الذكريات من الصعب أن تمحى بسهولة خاصة عندما تتعلق بسعادتنا وفرحنا ،، أسأل الله لنا ولكم دوام الصحة والعافية ،، دمتم طيبين ،، محبكم عبدالماجد

اقرأ المزيد

الأوسمة :

التخييم ، السيارة ، الكاميرا ، الحامل ، تعريض

and this is my css :

.posts {
background : #fcfcfc;
border : 1px solid black ;
margin-bottom : 5px;
padding : 10px;

}

.headerpost {
border : 1px solid black ;
position : relative;
overflow : hidden ;
width : 100%;

}
.postthumb {

}

.postdate {
background : #f1c832 ;
display : block;
opacity: .7;
/* fix for IE

FOR IE 5-7 :
filter: alpha(opacity=70);

FOR IE 8
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
*/

position : absolute;
top : 5px ;
left : 5px;
padding : 3px 5px;
-webkit-border-radius : 3px ;
-moz-border-radius : 3px ;
border-radius : 3px;
}

.mid-headerpost {
/* border : 1px solid black ; */

}
.posttilte a {
color : #3d435a ;
font-size : 24px;
text-decoration : none;
font-weight: bold;

}

.posttilte a:hover {
color : #3d435a ; /* لون المدونة */
}

.posttypeicon {
width : 50px;
border-left: 1px solid black ;
float : right;
border-top : 1px solid black ;

}
.posttilte{

float : right;
height : 48px;
line-height : 50px;
width : 564px;
border-top : 1px solid black ;

}

.posttilte a{
padding-right : 8px;
}

.bot-headerpost {
clear : both;
width : 616px;
border-top : 1px solid black ;
height : 23px;

}

.bot-headerpost a {
float : right;
text-decoration : none;
color : #912039;
margin-right: 5px;
height : 23px;
line-height: 23px;

}
.bot-headerpost img {
margin-top : 3px;
}

.postmeta-auther {
float : right;
width : 25%;

}

.postmeta-comments-number {
float : right;
width : 25%;
}

.postmeta-views {
float : right;
width : 25%;
}

.postmeta-category {
float : right;
width : 25%;
}

.contentpost {
clear : both ;
}

.postmeta-auther-icon{
float :right;
width : 17px;
}

.postmeta-comments-number-icon{
float :right;
width : 17px;
}
.postmeta-views-icon{
float :right;
width : 17px;
}
.postmeta-category-icon{
float :right;
width : 17px;
}

.contentpost-content {
border-bottom : 1px solid black ;
border-right :1px solid black ;
border-left : 1px solid black ;
direction : rtl ;
padding : 8px;

}

.postcontnent p {

}

.rmore {
padding-top: 7px;
padding-right : 540px;

}

.rmore a{
text-decoration : none;
color : #3d435a ;

}
.rmore a:hover{
color : #b32f46;

}

.contentpost-tags {
border-bottom : 1px solid black ;
border-right :1px solid black ;
border-left : 1px solid black ;
clear : both;

}

.tagstitle {
overflow : auto ;
width: 100%;
height : 22px;

}
.tagstitle-icon {
float : right ;
margin : 3px 3px;

}

.tagstitle-text {
float : right;
height: 22px;
line-height : 22px;

}
.tagstitle-text h1{
display: inline;
margin-left : 3px;
}

.tagstitle-text a{
text-decoration : none;
color : #912039;
}

.tagstitle-text a:hover{
color : #3d435a ;

}

i captured an image and i mark this problems with red circles .

direct link to the image :
[http://s23.postimg.org/na2ofmior/u8u8u.png](http://s23.postimg.org/na2ofmior/u8u8u.png “http://s23.postimg.org/na2ofmior/u8u8u.png”)

i need the borders reach the end of the div .

[Htmlmainiac]

Think it might be a bug try a different browser

[CrocoDillon]

On `.headerpost` you have a border and on `.contentpost` you don’t, that’s why the former is a little bit wider. You can fix this by removing `width: 100%` form `.headerpost`. That might fix the gaps too. The layout is to weird for me to do more testing there.

[dagash]

thank you CrocoDillon , it works …

[Author]

Posts