Проблема с форматированием Div

У меня есть HTML-файл, как это (я только положил тело страницы):Проблема с форматированием Div

<body> 
    <form id="form1" runat="server"> 
    <div class="divBody"> 
     <div id="divHeader"> 
     </div> 
     <div id="leftColumn"> 
     Welcome! 
     </div> 
     <div id="rightColumn"> 
     </div> 
    </div> 
    </form> 
</body>

И CSS файл содержит следующее:

.divBody { 
    border-style: dotted; 
    border-width: medium; 
    margin: 0 auto; 
    width: 1024px; 
    height: 768px; 
    position: relative; 
} 
#divHeader { 
    width: 100%; 
    height: 70px; 
    background-color: #000000; 
} 
#leftColumn { 
    width: 33%; 
    height: 100%; 
    background-color: #FF0000; 
    float: left; 
} 
#rightColumn { 
    width: 66%; 
    height: 100%; 
    background-color: #00FF00; 
}

Я хочу заголовка и двух столбцов. Заголовок - Ok, но столбцы больше, чем высота divBody, а rightColumn не соответствует 66% ширины divBody.

Что происходит?

спасибо.

источник

2009-12-22 VansFannel

Это может помочь узнать, какие браузеры Вас беспокоят /. – JasCav

Firefox 3.5.6 и Internet Explorer 8. – VansFannel

Ваш заголовок исправлен height: 70px; и толкает колонны вниз. Вы можете добавить дополнение к divBody, чтобы встретить это: see it in action.

Вам также нужно сделать правую колонку float, иначе она будет расположена под левым столбцом, а не справа.

Вы должны рассчитывать на Blueprint или YUI 2: Grids. Если вам не нравятся фреймворки CSS, есть и другие хорошие ресурсы, такие как multi-column liquid layouts.

Примечание: Я не знаю, было ли это то, что вы имели в виду, но 33% + 66% == 99%, следовательно, разрыв.

источник

2009-12-22 18:44:03

Большое спасибо за вашу помощь. Я изменил 66% с 67%. – VansFannel

Я думаю, вам нужно добавить флоат-вправо для правого столбца:

#rightColumn { 
    width: 66%; 
    height: 100%; 
    background-color: #00FF00; 
    float: right; 
}

Как для высоты колонны: Я думаю, что это из-за относительного расположения. Для того, чтобы высоту колонн FIT идеально можно вычислить точное количество пикселей, например, так:

#leftColumn { 
    width: 33%; 
    height: 698px; 
    background-color: #FF0000; 
    float: left; 
} 
#rightColumn { 
    width: 66%; 
    height: 698px; 
    background-color: #00FF00; 
    float: right; 
}

(высота тела - высота заголовка = 768 - 70 = 698)

, но это имеет недостаток, заключающийся в том, что столбцы могут не расти вертикально, если тело становится больше.

Другим подходом было бы сохранить столбцы на 100%, но приклеить их к верхней части тела. Вы должны дать им относительное позиционирование для этого. Кроме того, вы должны поднять их т счета за го пространства, занимаемого заголовком:

#leftColumn { 
    width: 33%; 
    height: 100%; 
    background-color: #FF0000; 
    float: left; 
    top: -70px; 
    position: relative; 
} 
#rightColumn { 
    width: 66%; 
    height: 100%; 
    background-color: #00FF00; 
    float: right; 
    top: -70px; 
    position: relative; 
}

источник

2009-12-22 18:39:38

Отлично! Оно работает! Но теперь у меня проблема с правым и левым столбцом больше divBody. – VansFannel

Если вы ищете что-то вроде этого, я настоятельно рекомендую использовать YUI Grids. Они уже выполнили работу по предоставлению макетов (в браузерах тоже), и вам просто нужно заполнить ваши данные. Очень проста в использовании и очень хороша (и настройка похожа на вашу).

источник

2009-12-22 18:40:18 JasCav

Я думаю, что это может помочь вам:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Вы не должны использовать подвесную систему, и нет никаких дополнительных JavaScript или CSS хаки используются.

источник

2009-12-22 18:54:36 ryanulit

Проблема с форматированием Div

ответ

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