refactor 3-more into separate books

12-css-for-js/4-float/4-add-border-keep-width/solution.md

@@ -0,0 +1,41 @@
+# Подсказка
+
+Используйте свойство `box-sizing`.
+
+# Решение
+
+Да, можно -- указываем `box-sizing: border-box` и добавляем свойства:
+
+```html
+<!--+ run -->
+<style>
+  .left {
+    float:left; 
+    width:30%; 
+    background: #aef;
+  }
+
+  .right {
+    float:right; 
+    width:70%;
+
+*!*
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+
+    border-left: 2px solid green;
+    padding-left: 10px;
+*/!*
+
+    background: tan;
+  }
+</style>
+
+<div class="left">
+ Левая<br>Колонка
+</div>
+<div class="right">
+ Правая<br>Колонка<br>...
+</div>
+```
+

12-css-for-js/4-float/4-add-border-keep-width/task.md

@@ -0,0 +1,37 @@
+# Добавить рамку, сохранив ширину
+
+[importance 4]
+
+Есть две колонки `30%/70%`:
+
+```html
+<!--+ autorun run play -->
+<style>
+  .left {
+    float:left; 
+    width:30%; 
+    background: #aef;
+  }
+
+  .right {
+    float:right; 
+    width:70%;
+    background: tan;
+  }
+</style>
+
+<div class="left">
+ Левая<br>Колонка
+</div>
+<div class="right">
+ Правая<br>Колонка<br>...
+</div>
+```
+
+**Добавьте к правой колонке рамку `border-left` и отступ `padding-left`.**
+
+Двухколоночная вёрстка при этом не должна сломаться! 
+
+Желательно не трогать свойство `width` ни слева ни справа и не создавать дополнительных элементов. 
+
+Требуется поддержка всех современных браузеров, IE начиная с версии 8.