Правый блок не прижимается к хедеру

@Diwate · Регистрация: 20.04.2015

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

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

CSS
1
2
3
4
5
6
7
8
9
10
11
.right{
  width: 29%;
  height: 720px;
  float: right;
  position: relative;
  background-color: #4682B4;
  margin: 0;
  padding: 0;
  top:0;
  right:0;
}

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

@Dr@gon. · 23.06.2015, 13:29

Сделай пример в http://jsfiddle.net/ или в http://codepen.io/pen/ тогда сразу будет видно что не так.

Скорее всего можешь поставить среднему боку с контентом: float: left;

Добавлено через 7 минут
что то типо того: http://jsfiddle.net/a7rtozyg/

HTML5
1
2
3
4
<div class="top"></div>
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>

CSS
1
2
3
4
.top{background-color: #000; width: 100%; height: 150px;}
.left{background-color: #444; width: 25%; height: 800px; float: left;}
.mid{background-color: red; width: 50%; height: 800px; float: left;}
.right{background-color: #444; width: 25%; height: 800px; float: left;}

Комментарий администратора

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

@andrey1994 · 23.06.2015, 15:03

Не вмещается и съезжает вниз. Уменьшите ширину других блоков.

@Diwate · 23.06.2015, 15:47 **[ТС]**

andrey1994, Благодарю Вам и всем кто ответил. Уменьшил центр и блок стал на место.
Вот пример. http://codepen.io/anon/pen/bdYeav

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Мой макет</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    </head>
    <body>
        <div class="head"> 
            <h1>Поделочные камни</h1> 
        </div>
        <div class="left"> 
            <h2> Навигация </h2>
            <ul>
                <li><a href="index.html" title="Ссылка">Нефрит</a></li>
                <li><a href="index.html" title="Ссылка">Жадеит</a></li>
                <li><a href="index.html" title="Ссылка">Малахит</a></li>
                <li><a href="index.html" title="Ссылка">Лазурит</a></li>
                <li><a href="index.html" title="Ссылка">Чароит</a></li>
                <li><a href="index.html" title="Ссылка">Флюорит</a></li>
                <li><a href="index.html" title="Ссылка">Оникс</a></li>
                <li><a href="index.html" title="Ссылка">Кварц</a></li>
                <li><a href="index.html" title="Ссылка">Серпентин</a></li>
                <li><a href="index.html" title="Ссылка">Родонит</a></li>
                <li><a href="index.html" title="Ссылка">Хризопраз</a></li>
                <li><a href="index.html" title="Ссылка">Яшма</a></li>
                <li><a href="index.html" title="Ссылка">Агат</a></li>
                <li><a href="index.html" title="Ссылка">Бирюза</a></li>
                <li><a href="index.html" title="Ссылка">Амазонит</a></li>
                <li><a href="index.html" title="Ссылка">Сердолик</a></li>
            </ul>
        </div>
        <div class="center"> 
            <h2> Поделочные камни </h2>
            <strong> Нефрит </strong>
            <p>
                Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад  -  это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых. 
                Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне. 
                <a href="index.html" class="c2" title="Ссылка">продолжение</a>
            </p>
            
            <strong> Сердолик </strong>
            <p>
                Сердолик известен с глубокой древности. Существуют различные версии относительно его названия. Одна из них связана с тем, что камень имеет цвет сырого мяса (по латыни мясо - carne). В Библии, в книге Исход, сердолик упоминается среди камней, украшающих нагрудник первосвященника.
                Сердолик считался талисманом, предотвращающим приступы дурного настроения. Свет убывающей луны  отражается от гладкой блестящей поверхности сердолика, не причиняя вреда его владельцу. 
                <a href="index.html" class="c2" title="Ссылка">продолжение</a> 
            </p>
            <strong> Яшма </strong>
            <p>
                Существует очень много видов яшмы. Название «яшма» происходит от греч. «яспис» (пестрый), вероятно, производного от араб. «яшб», др.-евр. «ясфе» и персидского «яшм». Некогда на Руси слово «яспис» означало «крапчатый камень». 
                Некоторые яшмы имеют сложный узор (пейзажные, рисунчатые и т.п.). Преобладающие цвета – серый, от зеленоватого до темно-зеленого, желтый различных оттенков, сургучно-красный, коричневый, реже от голубого до синего или фиолетовый. Яшмы всегда непрозрачны. Они характеризуются весьма плотным сложением, большой вязкостью, довольно высокой твердостью. 
                <a href="index.html" class="c2" title="Ссылка">продолжение</a>
            </p>
            <strong> Флюорит </strong>
            <p>
                Флюорит - это прозрачный или полупрозрачный камень, имеющий стеклянный блеск, разнообразной цветовой окраски: бесцветный, голубой, розовый, желтый, зеленый, фиолетовый (почти черный).
                Часто отмечается неравномерность и различная интенсивность окраски, встречаются полосчатые и пятнистые разновидности.
                Пожалуй, в мире нет минерала, который обладал бы столь широкой гаммой окраски, какой обладает флюорит. 
                <a href="index.html" class="c2" title="Ссылка">продолжение</a>
            </p>
            <br>
        </div>
        <div class="right"> <h3> Турмалин </h3>
            <p>
                Название камня произошло от сингальского Turamali или разноцветный. Этот камень был завезен в Европу голландскими моряками с острова Цейлон. 
            </p>
            <p>
                Однако, в России, турмалин был известен раньше, еще с 16 века. Самой замечательной особенностью этого минерала является его полихромность — многоцветность. При этом окраски изменяются от синей и зеленой до розовой и бесцветной. 
            </p>
            <p>
                Хорош этот камень Скорпиону и Раку. Плох он для Козерогов и Дев — эти знаки от турмалина ничего не получают. Астрологи также рекомендуют турмалин родившимся под знаком Рыб.  Хорош турмалин для Скорпиона, занимающегося трансформацией сексуальной энергии. Носить его нужно обязательно в золоте. Для Скорпиона нужны турмалин в золоте и кровавик (гематит) в серебре. Форма турмалина — кабошон яйцеобразный. Эта форма наиболее полно проявляет его свойства. 
                <a href="index.html" class="c2" title="Ссылка">продолжение</a>
            </p></div>
            <div class="footer"> <p lang="en">
                Copyright © 2008 Sitename 
            </p>
            <p>
                Designed by Templates <a class="c1" href="http://greenfam.narod.ru/">Kon Green</a> <br>
                Designed by DiwStudio <a class="c1" href="http://nateme.ru/">Copy design by Diwate </a>
            </p></div>
    </body>
</html>

CSS
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
html, body{ 
    margin:0;  /*выровнять по ширине до конца*/
    padding:0; 
    max-width:auto;  /* Максимальная ширина страницы */
    min-width:800px;   /* Минимальная ширина страницы */
}
.head{                  /* */
    background:black; /* цвет фона */
    color:red;       /* цвет текста */
    height:100px;   /* высота */
    width:100%;
    position:relative; 
}
.left{
    float:left;/* выровнять по левому краю */
    width:20%; /* расстояние до центра */
    height:760px; /* высота */
    position: relative;
    background-color: #B0C4DE; /* цвет фона */
    margin:0; 
    padding:0;
}
 
.center{
    float:left;/* выровнять по левому краю */
    background-color: #FFFFFF;
    display: inline;
    position: relative;
    width: 50%;
    margin: 0;
    padding: 1%;
    height:730px;
}
 
.right{
    width: 25%;
  height: 760px;
  float: right;
  position: relative;
  background-color: #4682B4;
  margin: 0; /* Убираем отступы вокруг */
  padding: 0;
  top:0;
  right:0;
    
}
.footer{
    color:white;
    height: 80px;
  background-color: #000;
  clear: both;
  text-align: center;
  padding: 10px 0 10px 0;
    
}
ul{
    list-style-type: none; /* Убираем маркеры */
margin-left: 0; /* Отступ слева в браузере IE и Opera */
padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
    
    }
.left li a {
 
color:#663399;
font:13px verdana, arial, helvetica, sans-serif;
font-weight:900;
display:block;
width:90%;
margin-left:7px;
border-bottom:1px dotted #9999CC;
background-color:#B0C4DE;
text-decoration:none;
padding:3px;
}
 
h1 {
font:32px verdana, arial, helvetica, sans-serif;
font-weight:900;
color:#B43F38;
 margin:0; 
padding:10px 0 0 25px;
}
h2 {
font:18px verdana, arial, helvetica, sans-serif;
font-weight:900;
color:#B43F38;
padding:5px 0 0 10px;
}
h3 {
font:18px verdana, arial, helvetica, sans-serif;
font-weight:900;
color:#B43F38;
padding:5px 0 0 5px;
}
strong {
font:16px verdana, arial, helvetica, sans-serif;
font-weight:900;
color:#B43F38;
padding:0 0 0 10px;
}
 
a.center  {
    border: none; /* Убираем границу для браузера Firefox */
    color: red; /* Цвет линии для остальных браузеров */
    background-color: red; /* Цвет линии для браузера Firefox и Opera */
    height: 2px; /* Толщина линии */
    }

Комментарий администратора

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	23.06.2015, 15:03
	Сообщение было отмечено Taatshi как решение Решение Не вмещается и съезжает вниз. Уменьшите ширину других блоков. 1

Правый блок не прижимается к хедеру

Решение