Моя правая боковая панель работает неправильно, как левая боковая панель?

Question

Я изучаю HTML/CSS самостоятельно, большую часть времени я получаю сообщение об ошибке в каждой строке, которую я пишу. Не знаю, почему моя правая боковая панель неправильно размещена как левая. Пожалуйста, взгляните на this jsfiddle.

<div class="bo"> 
     <div class="left"> 
     <div class="lside"> 
      <div class="lhead"></div> 
      </div> 
     </div> 
     <div class="pbo"> 
     <div class="post"> 
      <div class="hpost"> 
       <img src="1016949_702659679791359_6170947506430480265_n.jpg" height=50 width=50 /> 
    <p>VigneshWarar </p> 

      </div> 


      </div> 
     </div> 
     <div class="right"> 
     <div class="rside"></div> 
     </div> 

    </div> 

CSS

.bo{ 
    top:0px; 
    width:1150px; 
    background: #FAFAFA; 


    } 
    .pbo{ 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 60px; 
    height:500px; 



} 
.post{ 
    height: 390px; 
    width: 450px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 80px; 
    background: #000; 
    border: 1px solid #e8e8e8; 
    top: 0px; 



} 
.hpost{ 
    width:100%; 
    height: 50px; 
    border: 1px solid #ddd; 
    border-top:none; 
    border-right: none; 
    border-bottom: 1px solid #e8e8e8; 

} 
.hpost p{ 
    margin-left: 56px; 
    margin-top: -49px; 
    font-family: 'Open Sans', sans-serif; 
} 
.lside{ 
    width: 300px; 
    height: 300px; 
    float: left; 
    background:#FF0000; 
    border: 1px solid #e1e8ed; 


} 
.lhead{ 
    height: 40px; 

} 
.rside{ 
    float: right; 
    width: 300px; 
    height: 300px; 
    background:#0000FF; 
    border: 1px solid #e1e8ed; 
    margin-top: inherit; 

} 

Answer 1

Bit нечеткое, но это делает trick..more информация на своем пути ...

редактировать: так сказать так: если вы плаваете элемент, который он будет плавать по относительной позиции ГЭС.

Пример: если div находится относительно: 500px (сверху), 40px (слева), и вы плаваете div вправо: он будет плавать до относительного: 500px (вверху) 0px (справа). Чтобы решить эту проблему, вам нужно поместить этот div по относительной: 0px (вверху). Вы можете достичь этого a) поместите элемент в top: 0px или b) поместите div в html на первой строке или где бы он ни находился: 0px (вверху).

я также расположить элемент с вашим именем в нем вместо:

margin-left: 56px; 
    margin-top: -49px; 

к:

.hpost { 
    ... 
    position: relative; 
} 
.hpost p { 
    ... 
    position: absolute; 
    top: 0; 
    left: 50px; 
    padding: 0px 6px; 
} 

Если вы не понимаете этого, не стесняйтесь связаться со мной.

Я также редактировать CSS-код более читаемый код (для меня)

.bo { 
 
    width: 1150px; 
 
    background: rgb(250, 250, 250); 
 
} 
 

 
.pbo { 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: 60px auto 0; 
 
    background-color: rgb(255, 255, 0); 
 
    /*T0*/ 
 
} 
 

 
.post { 
 
    height: 390px; 
 
    width: 450px; 
 
    margin: 80px auto 0; 
 
    background: rgb(0, 0, 0); 
 
    border: 1px solid rgb(232, 232, 232); 
 
} 
 

 
.hpost { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 1px solid rgb(221, 221, 221); 
 
    border-top: none; 
 
    border-right: none; 
 
    border-bottom: 1px solid rgb(232, 232, 232); 
 
    position: relative; 
 
} 
 

 
.hpost p { 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: rgb(255, 192, 203); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50px; 
 
    padding: 0px 6px; 
 
} 
 

 
.lside, 
 
.rside { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid rgb(225, 232, 237); 
 
} 
 

 
.lside { 
 
    float: left; 
 
    background: rgb(255, 0, 0); 
 
} 
 

 
.lhead, .rhead { 
 
    height: 40px; 
 
} 
 

 
.rside { 
 
    float: right; 
 
    background: rgb(0, 0, 255); 
 
}

<div class="bo"> 
 
    <div class="left"> 
 
    <div class="lside"> 
 
     <div class="lhead">Left to Left</div> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="rside"> 
 
     <div class="rhead">Right to Right</div> 
 
    </div> 
 
    </div> 
 
    <div class="pbo"> 
 
    <div class="post"> 
 
     <div class="hpost"> 
 
     <img src="1016949_702659679791359_6170947506430480265_n.jpg" height=50 width=50> 
 
     <!-- not /> this is HTML not XML markup --> 
 
     <p>VigneshWarar</p> 
 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 

 

 
</div>