Стоп текст оберточной

Question

На следующий jsfiddle:

http://jsfiddle.net/oshirowanen/4fgkj/

Вот отрывок из HTML, как это было бы слишком много HTML, чтобы опубликовать здесь, если я разместил все это:

<div id="main"> 
    <div class="inner"> 
     <ul class="column"> 
      <li class="one"> 
       <ul> 
        <li><a href="#" class="link">SIDE MENU</a></li> 
        <li><a href="#" class="link">SIDE MENU</a></li> 
        <li><a href="#" class="link">SIDE MENU</a></li> 
       </ul> 
      </li> 
      <li class="two"> 
       <ul> 
        <li class="main_content"> 

         <p>content goes here</p> 

        </li> 
       </ul> 
      </li> 
     </ul> 

     <div class="clearfix"></div> 
    </div> 
</div> 

Вы увидите, что у меня есть меню и некоторый контент. Проблема в том, что я не хочу, чтобы содержимое обтекало меню.

Как остановить это?

Answer 1

Прежде всего, не следует использовать li для содержания, он используется только для отображения списков (например, меню). Во-вторых - чтобы ответить на ваш вопрос - это структура, как это может делать то, что вы хотите, и довольно регулярно используется:

HTML:

<div class="wrapper"> 
    <div class="header"> 
      header 
    </div> 
    <div class="wrapright">  
     <div class="right"> 
      right 
     </div> 
    </div>  
     <div class="left"> 
      left 
     </div> 
     <div class="footer"> 
      footer 
     </div>  
</div> 

CSS:

.wrapper{ 
    width: 90%; 
    margin: 0 auto; 
} 
.header{ 
    float: left; 
    width: 100%; 
    background-color: #f4f4f4 
} 
.wrapright{ 
    float: left; 
    width: 100%; 
    background-color: #cfcfcf 
} 
.right{ 
    margin-left: 220px; 
    background-color: #afeeee; 
    height: 200px; 
} 
.left{ 
    float: left; 
    width: 200px; 
    margin-left: -100%; 
    background-color: #98fb98; 
    height: 200px; 
} 
.footer{ 
    float: left; 
    width: 100%; 
    background-color: #f4f4f4; 
} 
body { 
    padding: 0px; 
    margin: 0px; 
} 

---

LIVE DEMO

---

Конечно, вам нужно будет отрегулировать CSS, чтобы изменить цвет фона, отступы, ... и HTML для настройки содержимого. Но я думаю, вы сможете это понять.

Answer 2

Ну, не сказать ему, чтобы обернуть вокруг ... в:

#main .column .one { 
    padding:10px 10px 10px 0px; 
    float:left; 
} 

просто удалить строку

float:left; 

Answer 3

Вы должны установить min-height к вашим правилам CSS (#main .column .one). Если вы установите его, ваш контент будет правильным в меню, но не будет обернут его.

#main .column .one { 
    padding:10px 10px 10px 0px; 
    float:left; 
    min-height:600px; 
} 

Answer 4

Все, что вам нужно сделать, это добавить это в ваших стилях:

.main_content {overflow: hidden;} 

Однако, я должен сказать, что с помощью ul для компоновки страницы, как это не очень хорошая идея. Семантически содержимое вашей страницы не является неупорядоченным списком.