Разделить страницу по вертикали с помощью CSS

Извините, ребята, за очень простой вопрос, но я попытался сместить один div слева и один справа с предопределенной шириной вдоль этих строк

<div style="width: 100%;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

Несмотря на то, что это "в основном" работает, кажется, что он испортил другие элементы на странице ниже.

Итак, каково правильное разделение HTML-страницы по вертикали на две части с использованием CSS без использования других элементов на странице?

Ответ 1

вы можете использовать..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

теперь элемент ниже этого не будет затронут.

Ответ 2

Просто добавьте переполнение: auto; для родительского div

<div style="width: 100%;overflow:auto;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

Рабочий демонстрационный пример

Ответ 3

Я думаю, что ваши элементы на странице испорчены, потому что вы не очищаете свои поплавки, проверьте это

Демо

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;">
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}

Ответ 4

Также может быть решение, имеющее как float, так и left.

Попробуйте следующее:

Рабочая демонстрация

P.S. Это просто улучшение ответа Ankit

Ответ 5

Проверьте эту скрипту:

http://jsfiddle.net/G6N5T/1574/

CSS/HTML-код:

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 33%;
background:lightblue;
    height: 400px;
}

.fcenter{
    float:left;
    width: 33%;
    background:lightgreen;
    height:400px;
    margin-left:0.25%;
}

.fright {
float: right;
    background:pink;
    height: 400px;
    width: 33.5%;
    
}

<div class="wrap">
    <!--Updated on 10/8/2016; fixed center alignment percentage-->
    <div class="fleft">Left</div>
    <div class="fcenter">Center</div>
    <div class="fright">Right</div>
</div>