]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: b2bad22)
fix centered columns flowing around uncentered columns 8991/head
authorAndy Cochran <acochran@council.nyc.gov>
Sat, 2 Jul 2016 00:44:44 +0000 (20:44 -0400)
committerAndy Cochran <acochran@council.nyc.gov>
Sat, 2 Jul 2016 00:44:44 +0000 (20:44 -0400)
scss/grid/_position.scss patch | blob | blame | history
test/visual/grid/centered-columns.html patch | blob | blame | history

diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index 886d20b7f34316fbdb9e605725a9c1a30b0848cf..a832a1387b65eaa1a69eb8963e91ebdbbc00115a 100644 (file)
--- a/scss/grid/_position.scss
+++ b/scss/grid/_position.scss
@@ -19,6 +19,7 @@
   @else if $position == center {
     &, &:last-child:not(:first-child) {
       float: none;
+      clear: both;
     }
     margin-left: auto;
     margin-right: auto;
diff --git a/test/visual/grid/centered-columns.html b/test/visual/grid/centered-columns.html
index 8ee92b220ab6d21bdae037f8b20169e67107dbaf..f9205492460979ad795ec590dcc2d0262fc18ea7 100644 (file)
--- a/test/visual/grid/centered-columns.html
+++ b/test/visual/grid/centered-columns.html
@@ -10,24 +10,45 @@
   </head>
   <body>
 
+    <div class="row column">
+      <h1>Centered Columns</h1>
+    </div>
+
     <div class="row">
       <div class="medium-7 medium-centered columns">
-        <p style="background-color:#eee;">all these columns should be centered, even the last</p>
+        <p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
       </div>
     </div>
 
     <div class="row">
       <div class="medium-7 medium-centered columns">
-        <p style="background-color:#eee;">all these columns should be centered, even the last</p>
+        <p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
       </div>
       <div class="medium-7 medium-centered columns">
-        <p style="background-color:#eee;">all these columns should be centered, even the last</p>
+        <p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
       </div>
       <div class="medium-7 medium-centered columns">
-        <p style="background-color:#eee;">all these columns should be centered, even the last</p>
+        <p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
       </div>
       <div class="medium-7 medium-centered columns">
-        <p style="background-color:#eee;">all these columns should be centered, even the last</p>
+        <p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
+      </div>
+    </div>
+
+    <div class="row column"><hr></div>
+
+    <div class="row">
+      <div class="medium-5 columns">
+        <p style="background-color:#aee;">This blue column is not centered.</p>
+      </div>
+      <div class="medium-7 medium-centered columns">
+        <p style="background-color:#fbb;">This pink column should be centered and clear the blue column.</p>
+      </div>
+      <div class="medium-5 columns">
+        <p style="background-color:#aee;">This blue column is not centered.</p>
+      </div>
+      <div class="medium-5 columns">
+        <p style="background-color:#aee;">This blue column is not centered.</p>
       </div>
     </div>
 
Mirror of https://github.com/foundation/foundation-sites.git