Плаваючий div знижується при зміні розміру сторінки

Ok, so I have a 3 column floating divs. All are set float:left

  1. Ліва частина має фіксовану ширину
  2. Середній розмір розділу змінює розмір вікна
  3. Праворуч div має фіксовану ширину

Все виглядає чудово, доки я змінюю розмір вікна, а RIGHT div опускається нижче середнього div

enter image description here

enter image description here

і ось деякі фрагменти коду

<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:600px;max-width: 65%">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="width:265px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

.divContent{    
    margin : 16px 10px 5px;
}

.divContainer {
    float: left;
    margin: 0px 20px 20px 0px;
    padding-bottom: 10px;   
    background-color:#FFFFFF;
    border: 1px solid #CCC;
    box-shadow:4px 4px 13px #bbbbbb;
    -moz-box-shadow:4px 4px 13px #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

EDIT

Вдалося вирішити цю проблему, але існує розрив між середнім div та правим div , і я не можу заповнити його, не надав права div спуститися Я не можу змінити розмір середнього вище 63%, і так дивно ...

body min-width = 1560px
<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:900px;width: 63%;">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:100px;max-width: 15%;float: right">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

enter image description here

4

5 Відповіді

Дайте максимальну ширину для divContainer у пікселі.

наприклад.

max-width: 710px;

Або ви також можете зменшити максимальну ширину до 53%. Я спробував це працює.

2
додано
це працює, але середній DIV не заповнює решту екрану, тому більші роздільники мають порожній простір справа від екрана
додано Автор Andre Escudero, джерело

Я думаю, що проблема полягає в тому, що 65% ширини середнього розділу є для всього документа, і коли документ змінюється, середній розділ отримує зрізаний, щоб він перекривав потрібний варіант, змушуючи його рухатися вниз.

Я думаю, що це має працювати для середнього div:<div class="divContainer" style="min-width:600px;max-width: 90% - 565px">

I havn´t tried it out myself but i think that should work and if not, just try to lower the precentage from 90% to something smaller.

EDIT:
If you want to be able to make the window shorter than 565px wide you can try and set:

BODY {min-width:600px; }

2
додано
віднімаючи від% o.o? Подумайте про те, що, на жаль, якщо просто поставити як середню, так і правий розділ нижче першого = (
додано Автор Andre Escudero, джерело
Мені вдавалося усунути помилку, але, коли на екрані з'являється більша роздільна здатність. Перевірте переглянутий код у першому повідомленні
додано Автор Andre Escudero, джерело
Спробуйте вирахувати трохи більше, скажіть 600 і близько того, і навіть може змінити 90% до 70%. Не впевнений, що він буде працювати, але якщо ви зіпсувати з цінностями трохи, я не зрозумів, чому це не повинно працювати :)
додано Автор Mats Edvinsson, джерело
і, до речі, якщо міні-ширина середньої довжини дорівнює 600, то слід додати, що разом із шириною іншої ширини 2 дюйма, а також будь-яким потенційним посиленням і так далі, тому, коли я думаю про це, я встановлю БУДИ {хв-ширина: 1200}
додано Автор Mats Edvinsson, джерело
якщо це вирішить вашу проблему, будь ласка, позначте це повідомлення як відповідь. :)
додано Автор Mats Edvinsson, джерело

Встановлення міні-ширини + відсоток для середнього розділу є трохи помилковим.

Як щодо спробувати щось на зразок цього для середнього?

<div class="divContainer" style="float: none; margin-left: 300px; margin-right: 300px">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

Те, що, по суті, тут робитиметься, це, зокрема, не плаває середня частина (так, щоб поля виникали під двома іншими, а потім - з обох сторін, таким чином, ви повинні отримати максимальну гнучкість. Якщо права частина все ще падає, вам може знадобитися змінити порядок HTML так, щоб середній розділ з'являвся після правильного.

0
додано
це поміщає середню та правий дюбелі нижче один одного, а середня діва має біле місце на верху
додано Автор Andre Escudero, джерело

Завершіть всі 3 колонки в 1 div і встановіть міні-ширину, щоб загальна зміна розміру сторінки була меншою за цю.

0
додано
Я спробував це, але право діви все-таки знижується = (
додано Автор Andre Escudero, джерело

SOLVED!!! I floated the first div to the left, the second one the to the right and the middle last no floats just margins based on right and left div width + padding+ margins

enter image description here

<div class="divContainer" style="width:300px;float: left;">
    <div class="divContent">[LEFT DIV StUFF HERE]</div>
</div>

<div class="divContainer" style="width: 250px;float: right;">
    <div class="divContent">[RIGHT DIV STUFF HERE]</div>
</div>

<div class="divWidget" id="clientStatusDiv" style="margin:0px 270px 0 310px;">
    <div class="divContent">[CENTER STUFF HERE]</div>
</div>

YAY !!! Lol це навіть працює, коли розмір виглядає добре !!

0
додано