layout.css

Same filename in this branch
  1. 7.x themes/stark/layout.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  2. 9 core/themes/olivero/css/layout/layout.css
  3. 9 core/themes/seven/css/layout/layout.css
  4. 9 core/themes/claro/css/layout/layout.css
  5. 9 core/themes/bartik/css/layout.css
  6. 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  7. 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  8. 8.9.x core/themes/seven/css/layout/layout.css
  9. 8.9.x core/themes/claro/css/layout/layout.css
  10. 8.9.x core/themes/stark/css/layout.css
  11. 8.9.x core/themes/bartik/css/layout.css
  12. 10 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  13. 10 core/themes/olivero/css/layout/layout.css
  14. 10 core/themes/claro/css/layout/layout.css
  15. 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  16. 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  17. 11.x core/themes/olivero/css/layout/layout.css
  18. 11.x core/themes/claro/css/layout/layout.css
  19. 11.x core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
/* ---------- Basic Layout Styles ----------- */

html,
body,
#page  {
  height: 100%;
}
#page-wrapper {
  min-height: 100%;
  min-width: 960px;
}
#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#header div.section {
  position: relative;
}
.region-header {
  float: right; /* LTR */
  margin: 0 5px 10px;
}
.with-secondary-menu .region-header {
  margin-top: 3em;
}
.without-secondary-menu .region-header {
  margin-top: 15px;
}
#secondary-menu {
  position: absolute;
  right: 0; /* LTR */
  top: 0;
  width: 480px;
}
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  display: inline;
  float: left; /* LTR */
  position: relative;
}
.one-sidebar #content {
  width: 720px;
}
.two-sidebars #content {
  width: 480px;
}
.no-sidebars #content {
  width: 960px;
  float: none;
}
#sidebar-first,
#sidebar-second {
  width: 240px;
}
#main-wrapper {
  min-height: 300px;
}
#content .section,
.sidebar .section {
  padding: 0 15px;
}
#breadcrumb {
  margin: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
  margin: 20px 20px 30px;
  width: 280px;
}
#footer-wrapper {
  padding: 35px 5px 30px;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  padding: 0 10px;
  width: 220px;
}
#footer {
  width: 940px;
  min-width: 920px;
}

File

themes/bartik/css/layout.css

View source
  1. /* ---------- Basic Layout Styles ----------- */
  2. html,
  3. body,
  4. #page {
  5. height: 100%;
  6. }
  7. #page-wrapper {
  8. min-height: 100%;
  9. min-width: 960px;
  10. }
  11. #header div.section,
  12. #featured div.section,
  13. #messages div.section,
  14. #main,
  15. #triptych,
  16. #footer-columns,
  17. #footer {
  18. width: 960px;
  19. margin-left: auto;
  20. margin-right: auto;
  21. }
  22. #header div.section {
  23. position: relative;
  24. }
  25. .region-header {
  26. float: right; /* LTR */
  27. margin: 0 5px 10px;
  28. }
  29. .with-secondary-menu .region-header {
  30. margin-top: 3em;
  31. }
  32. .without-secondary-menu .region-header {
  33. margin-top: 15px;
  34. }
  35. #secondary-menu {
  36. position: absolute;
  37. right: 0; /* LTR */
  38. top: 0;
  39. width: 480px;
  40. }
  41. #content,
  42. #sidebar-first,
  43. #sidebar-second,
  44. .region-triptych-first,
  45. .region-triptych-middle,
  46. .region-triptych-last,
  47. .region-footer-firstcolumn,
  48. .region-footer-secondcolumn,
  49. .region-footer-thirdcolumn,
  50. .region-footer-fourthcolumn {
  51. display: inline;
  52. float: left; /* LTR */
  53. position: relative;
  54. }
  55. .one-sidebar #content {
  56. width: 720px;
  57. }
  58. .two-sidebars #content {
  59. width: 480px;
  60. }
  61. .no-sidebars #content {
  62. width: 960px;
  63. float: none;
  64. }
  65. #sidebar-first,
  66. #sidebar-second {
  67. width: 240px;
  68. }
  69. #main-wrapper {
  70. min-height: 300px;
  71. }
  72. #content .section,
  73. .sidebar .section {
  74. padding: 0 15px;
  75. }
  76. #breadcrumb {
  77. margin: 0 15px;
  78. }
  79. .region-triptych-first,
  80. .region-triptych-middle,
  81. .region-triptych-last {
  82. margin: 20px 20px 30px;
  83. width: 280px;
  84. }
  85. #footer-wrapper {
  86. padding: 35px 5px 30px;
  87. }
  88. .region-footer-firstcolumn,
  89. .region-footer-secondcolumn,
  90. .region-footer-thirdcolumn,
  91. .region-footer-fourthcolumn {
  92. padding: 0 10px;
  93. width: 220px;
  94. }
  95. #footer {
  96. width: 940px;
  97. min-width: 920px;
  98. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.