Вопрос по выравниванию блоков в блочной верстке

@outoftime · Регистрация: 25.07.2009

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
<div id="leftSide"></div>
<div id="rightSide"></div>
<div id="center"></div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CSS
#leftSide {
    width: 220px;
    float: left;
    margin-right: 20px;
}
#rightSide {
    width: 240px;
    float: right;
    display: block;
    margin-left: 30px;
}
#center {
    display: block;
    clear: none;
    margin: 20px;
    min-width: 500px;
}

При этом див, находящейся в <div id="center"> вылазит на поле <div id="rightSide">, что логично, т.к. он занимает все незанятое пространство, а <div id="rightSide"> уже закончился.

Вопрос собственно в том, как сделать так, что-бы <div id="center"> занимал строго центральную часть окна не зависимо от расширенния. Для ясности скрин прилагается

@outoftime · 08.05.2010, 12:25 **[ТС]**

Считаю тему закрытой, вопрос отпал после прочтения этой статьи: http://www.webmagazine.biz/art... ayout.html

@koorya · 08.05.2010, 12:39

жаль, а у меня как раз получилось...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
#leftSide {
    width: 220px;
    float: left;
    margin-right: 20px;
    background-color: #ff0000;
}
#rightSide {
    width: 240px;
    float: right;
    display: block;
    margin-left: 30px;
    background-color: #00ff00;
}
#center {
    display: block;
    clear: none;
    margin-left: 20px;
    margin-right: 20px;
    min-width: 500px;
    background-color: #0000ff;
}
</style>
 
 
<div id="leftSide">1</div>
<div id="rightSide">2</div>
<div id="center">3</div>

@Alorian · 08.05.2010, 12:58

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

Посмотрел на эти страницы кода для верстки в несколько колонок и сравнил с простым и понятным кодом из 7 строк:

HTML5
1
2
3
4
5
6
7
<table>
    <tr>
        <td>колонка 1</td>
        <td>колонка 2</td>
        <td>колонка 3</td>
    <tr>
</table>

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

@koorya · 08.05.2010, 13:40

Alorian, я по началу так же подумал(таблицами), но вопрос был с дивами, так что..
в общем-то всегда только таблицами и делаю

@outoftime · 08.05.2010, 15:31 **[ТС]**

http://95.111.188.94/
можете сказать почему плывут отдельные фрагменты?

@koorya · 08.05.2010, 15:42

Что именно плывет-то?, Вдруг то, на что я подумаю, так и задумано?

@Alorian · 08.05.2010, 15:43

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

По вашей ссылке все дело в свойстве
#center #content div h3{clear:both;}

Отключите его и центр станет нормально отображаться. Если поняли технологию, то другие глюки сможете обнаружить самостоятельною

2koorya, кстати да. Вдруг так и было задумано) Но мне кажется что центр в файрфоксе должен быть повыше.

P.S. Не все глюки можно обнаружить описанным выше способом, но иногда полезно, как например сейчас.

@outoftime · 08.05.2010, 15:51 **[ТС]**

вот как все должно быть

@outoftime · 08.05.2010, 15:55 **[ТС]**

на ИЕ улетают новости в центре и реклама в шапке

Добавлено через 1 минуту
касательно оперы: на ней вообще все не так..

@Alorian · 08.05.2010, 16:26

Практически все ошибки связанные с float это ошибки неправильной ширины. Чтобы блок нормально обтекался, то он должен оставлять достаточно места для блока который будет справа от него.
Поставьте ширину левой колонки новостей чуть меньше чем 50%. Это что касается новостей.

Для дивов рекламы сверху у вас указано свойство display-inline, оно заствляет вести элементы вести себя как строчные. То есть как обычный текст.

В общем большинство ошибок изза того что вы неправильно ширину практически для всех элементов определяете. Ширина в процентах от родительского блока учитывается только если у родительского блока указана ширина.

Добавлено через 14 минут
Не то немного сказал. Если ширина у родительского блока указана неверно, то и у всех детей ширина будет неверно определяться.

@outoftime · 08.05.2010, 16:44 **[ТС]**

если кто зайдет с оперы сможет посмеяться

Добавлено через 7 минут
судя по всему дивами это не сверстать.. поднимется настроение переверстаю на таблицах..

@outoftime · 08.05.2010, 16:46 **[ТС]**

если найдется маньяк css буду благодарен, вот короче весь проект, соединение закрываю

@Alorian · 08.05.2010, 17:40

судя по всему дивами это не сверстать..

Я не разделяю верстку по каким то видам. Там где нужны таблицы - использую таблицы. Там где-нужны дивы - использую дивы.

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

Поэтому возможно есть ошибки или где-то можно сделать лучше.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
*{margin:0;padding:0;}
 
#header{width:100%;border-bottom:1px solid green;}
#middle{width:100%;margin:10px 0 10px 0;border:none;border-collapse:collapse;border-top:1px solid blue;border-bottom:1px solid blue;}
    #left{width:20%;}
    #content{}
            #block_s_gryaznim_dyadkoy{}
            #main-news{}
            #food{}
            #news{width:100%;}
                #news-left{width:49%;float:left;}
                #news-right{width:49%;float:right;}
    #right{width:20%;}
#footer{width:100%;border-top:1px solid green;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div id="header">HEADER</div>
    
    <table id="middle">
        <tr>
            <td id="left">LEFT</td>
 
            <td id="content">
                <div id="block_s_gryaznim_dyadkoy">Foto gryaznogo dyadki :)</div>
                <div id="main-news">Novosti</div>
                <div id="food">Chto-to pro edu</div>
                <div id="news">
                    <div id="news-left">Left Column</div>
                    <div id="news-right">Right Column</div>
                </div>
            </td>
 
            <td id="right">RIGHT</td>
        </tr>
    </table>
        
    <div id="footer">FOOTER</div> 
</body>
 
</html>

@outoftime · 08.05.2010, 17:59 **[ТС]**

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

@koorya · 08.05.2010, 21:38

вот я тут с нуля написал все, я на самом деле этим в первые занимаюсь, но получилось так кроссбраузерно, и так как время сейчас уже 03:35 (ночь), я не успел прописать стили для цветов и размеров шрифтов, да вообще не подключил фаил css, но .html сделал. Прошу к просмотру.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	08.05.2010, 12:25 [ТС]
	Считаю тему закрытой, вопрос отпал после прочтения этой статьи: http://www.webmagazine.biz/art... ayout.html 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	08.05.2010, 13:40
	Alorian, я по началу так же подумал(таблицами), но вопрос был с дивами, так что.. в общем-то всегда только таблицами и делаю 1

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	08.05.2010, 15:31 [ТС]
	http://95.111.188.94/ можете сказать почему плывут отдельные фрагменты? 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	08.05.2010, 15:42
	Что именно плывет-то?, Вдруг то, на что я подумаю, так и задумано? 1

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	08.05.2010, 15:43
	Ставите файрбаг и у каждого элемента пробуете отключать и тут же включать отдельные стили. Если после отключения какого либо стиля все станет так как вам надо, значит все дело в нем. По вашей ссылке все дело в свойстве #center #content div h3{clear:both;} Отключите его и центр станет нормально отображаться. Если поняли технологию, то другие глюки сможете обнаружить самостоятельною 2koorya, кстати да. Вдруг так и было задумано) Но мне кажется что центр в файрфоксе должен быть повыше. P.S. Не все глюки можно обнаружить описанным выше способом, но иногда полезно, как например сейчас. 1

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	08.05.2010, 15:55 [ТС]
	на ИЕ улетают новости в центре и реклама в шапке Добавлено через 1 минуту касательно оперы: на ней вообще все не так.. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	08.05.2010, 16:26
	Практически все ошибки связанные с float это ошибки неправильной ширины. Чтобы блок нормально обтекался, то он должен оставлять достаточно места для блока который будет справа от него. Поставьте ширину левой колонки новостей чуть меньше чем 50%. Это что касается новостей. Для дивов рекламы сверху у вас указано свойство display-inline, оно заствляет вести элементы вести себя как строчные. То есть как обычный текст. В общем большинство ошибок изза того что вы неправильно ширину практически для всех элементов определяете. Ширина в процентах от родительского блока учитывается только если у родительского блока указана ширина. Добавлено через 14 минут Не то немного сказал. Если ширина у родительского блока указана неверно, то и у всех детей ширина будет неверно определяться. 1

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	08.05.2010, 16:44 [ТС]
	если кто зайдет с оперы сможет посмеяться Добавлено через 7 минут судя по всему дивами это не сверстать.. поднимется настроение переверстаю на таблицах.. 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	08.05.2010, 17:59 [ТС]
	Alorian, как-бы это вообще-то первый шаблон который я попытался зделать, когда я его далал то узнал еще парочку ранее неизвестных мне вещей. Главный вывод: быть во всем оптималистом, ведь как таблицы так и слои имеют как + так и - 0