Остановить перенос текста

Question

На следующем jsfiddle:

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

Вот фрагмент 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_content {overflow: hidden;}

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

Answer 3

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

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

Answer 4

Ну, не говорите об этом...

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

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

float:left;