Created
June 18, 2012 13:29
-
-
Save h4/2948378 to your computer and use it in GitHub Desktop.
Отрицательные поля
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding:20px; | |
| background:#FFF; | |
| color:#000; | |
| } | |
| #header { | |
| padding:10px; | |
| background:#51CAC8; | |
| } | |
| #container { | |
| float:left; | |
| /* Делаем контейнер плавающим, чтобы добиться нужного поведения */ | |
| width:100%; | |
| /* Указываем контейнеру занимать все доступное пространство */ | |
| margin:10px -170px 10px 0; | |
| /* Устанавливаем отрицательное правое поле, чтобы подтянуть правую колонку */ | |
| } | |
| #nav { | |
| float:left; | |
| /* Прижимаем блок налево */ | |
| display:inline; | |
| width:150px; | |
| /* Обращаем внимание, что фактическая ширина блока = 170 пикселям */ | |
| padding:10px; | |
| background:#E73D00; | |
| } | |
| #content { | |
| margin:0 150px 0 170px; | |
| /* Устанавливаем поля, чтобы контент не «налезал» на боковые колонки */ | |
| padding:10px; | |
| background:#91CA00; | |
| } | |
| #sidebar { | |
| float:right; | |
| /* Прижимаем блок направо */ | |
| display:inline; | |
| width:130px; | |
| /* Обращаем внимание, что фактическая ширина блока = 150 пикселям */ | |
| margin-top:10px; | |
| padding:10px; | |
| background:#F5DC09; | |
| } | |
| #footer { | |
| clear:both; | |
| /* Ставим подвал ниже самой длинной колонки */ | |
| padding:10px; | |
| background:#DDDEDF; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Использование отрицательных полей</title> | |
| <link href="negative-margin.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| Шапка | |
| </div> | |
| <!-- Основное содержимое+боковая колонка --> | |
| <div id="container"> | |
| <div id="nav"> | |
| Левая колонка | |
| </div> | |
| <div id="content"> | |
| Контент | |
| </div> | |
| </div> | |
| <!-- Правая колонка. Плавающая, но идёт после основного содержимого --> | |
| <div id="sidebar"> | |
| Правая колонка | |
| </div> | |
| <div id="footer"> | |
| Подвал | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment