Боковая панель перекрывает содержание и нижний колонтитул

У меня есть иллюстрация здесь, чтобы лучше описать мою проблему. enter image description here
Боковая панель перекрывает мой контент и нижний колонтитул всякий раз, когда у Контента есть только мелкие предметы.

В моей _layout Я звоню врезку как этотБоковая панель перекрывает содержание и нижний колонтитул

<body> 
<div class="page"> 
    <div id="header">   
     <div id="menucontainer"> 
      <ul id="nav"> 
       MENUTABS 
      </ul> 
     </div> 
    </div> 
    <div id="main"> 
    <div id = "sidebar"> 
    @if (IsSectionDefined("SideBar")) 
    { 
     @RenderSection("SideBar", required: false) 

    } 
    else { 
     <p>Currently Unavailable, Sorry for the inconvinience</p> 
    } 
     </div> 

     @RenderBody() 
    </div> 
    <div id="footer"> 
    <div id="copyright">FOOTER</div> 
    </div> 
</div> 
</body>

тогда в моей View Я звоню его как этот

@section SideBar 
    { 
    @{Html.RenderAction("Index", "Post");} 
    }

Вот мой CSS

.page { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#main 
{ 
    clear: both; 
    padding: 10px 10px 10px 10px; 
    background-color: #fff; 
} 

#sidebar 
{ 
    float:left; 
    margin:200px 10px -30px 10px; 
    padding:10px -10px -10px 10px; 
    width:235px; 
    height:auto; 
    border: solid 2px black; 
    background-color:#9acbba;  
} 

footer, 
#footer { 
    background-color: #fff; 
    color: #999; 
    padding: 10px 0; 
    text-align: center; 
    line-height: normal; 
    margin: 0 0 30px 0; 
    font-size: .9em; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
}

Пожалуйста, помогите мне разобраться, ребята, в чем причина этого oblem. Благодаря T_T

источник

2013-03-01 bot

Вы очистили ваш поплавок? –

попробуйте добавить
в нижней части элемента, который содержит левую навигацию и содержимое. – irregularexpressions

поплавок в #sidebar? вы имеете в виду удалить/удалить его? когда я удаляю содержимое, перемещается под боковой панелью. T_T – bot

Хорошо вещь это на самом деле просто tbh ... почти вся ваша разметка была неправильной, но здесь у вас есть рабочая рамка для вашего сайта, см. THIS FIDDLE

HTML-

<body> 
<div class="page"> 
    <div id="main"> 
     <div id="header">   
      <div id="menucontainer"> 
       <ul id="nav"> 
        MENUTABS 
       </ul> 
      </div> 
     </div> 
     <div id="sidebar"> 
      @if (IsSectionDefined("SideBar")) { 
        @RenderSection("SideBar", required: false) 

      } else { 
        <p>Currently Unavailable, Sorry for the inconvinience</p> 
      } 
     </div> 
     <div id="content"> 
     </div> 
     <div id="footer"> 
      <div id="copyright">FOOTER</div> 
     </div> 
    </div> 
</div> 
</body>

CSS

.page { 
    width: 90%; 
    margin: 0 auto; 
} 

#main 
{ 
    float:left; 
    padding: 10px 10px 10px 10px; 
    background-color: gray; 
    width:940px; 
} 
#header { 
    width:900px; 
    padding:10px; 
    margin:10px; 
    background: yellow; 
} 
#content { 
    width: 641px; 
    background: blue; 
    height: 20px; 
    float: left; 
    margin:10px; 
    padding:10px; 
} 
#sidebar 
{ 
    float:left; 
    margin:10px; 
    padding:10px; 
    width:215px; 
    height:auto; 
    border: solid 2px black; 
    background-color:red;  
} 
#footer { 
    background-color: white; 
    color: #999; 
    padding: 10px; 
    text-align: center; 
    line-height: normal; 
    margin: 0 0 30px 0; 
    font-size: .9em; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
    clear: both; 
    margin: 10px; 
    width: 900px; 
}

источник

2013-03-01 08:14:32

У вас тоже есть чувак. Спасибо за то что делитесь Вашими идеями. Я буду считать ваш пост ответом. :) – bot

вы должны float также div обертка #sidebar и я guesting, что является #main

#main 
{ 
    float:left; 
    clear: both; 
    padding: 10px 10px 10px 10px; 
    background-color: #fff; 

}

... PLS посмотреть демо

DEMO

источник

2013-03-01 07:22:40 jhunlio

Боковая панель перекрывает содержание и нижний колонтитул

ответ

Смежные вопросы