В данном уроке мы научимся позиционировать блоки без использования таблиц. В этом нам поможет свойство CSS: float и его значения (left, right).
Float – это свойство CSS для позиционирования элементов. Оно имеет 2 значения, left – выравнивание по левому краю и right – выравнивание по правому краю.
Итак начнем.
Для начала взглянем на картинку (или схему, как вам удобно), на которой изображен результат того, что у нас получится в конце данного урока:
Из рисунка видно, что у нас будет 2 блока (левый и правый), и главный контейнер, в который будут помещены эти 2 блока.
Шаг 1. Сначала сделаем HTML разметку. Структура очень проста. Она состоит из 3 блоков (основной, левый и правый блок). Итак так как у нас бестабличная верстка, то мы будем использовать элемент . Открываем нашу HTML – страницу (у меня она называется index.html, вы можете назвать как вам хочется), и прописываем в ней следующий код:
<div id="main-container"> <div class="left"> <p class="txt">Тут любой текст</p> </div> <div class="right"> <p class="txt"> Тут любой текст </p> </div> </div>
Как видно из кода, тут 3 контейнера. Главный контейнер имеет id = «main-container», в него помещены еще 2 блока, которые имеют классы .left (левый) и .right (правый). Так же тут еще есть и параграфы , которые имеют класс .txt. В параграфе вы можете написать абсолютно любой текст, это не имеет большего значения.
Если вы уже написали этот код, то переходим к второму шагу.
Шаг 2. Теперь что бы все это работало, нам нужно написать стили к данным блокам. Для этого создаем .CSS – файл (у меня он называется main.css), и подключаем его к странице. Напомню, что .CSS – файл подключается с помощью данного кода:
<link type="text/css" rel="stylesheet" href="styles/main.css" />
Прописываем в нашем .CSS – файле все стили, которые были использованы при разметке блоков, а именно id = «main-container», .left, .right и .txt. Ниже показан код для каждого класса:
#main-container {width: 960px; height: 320px; background: #dddddd; margin: 30px auto 10px auto; border: 1px solid #fff; box-shadow: 0px 0px 3px #a5a5a5;}
.left {width: 230px; background: #83d9f9; float: left; border: 1px solid #3b97b9; margin: 10px 5px 10px 10px;}
А вот в классе .left присутствует данное свойство CSS: float. Так как этот блок у нас должен располагаться слева, то ему мы придаем значение left. В коде это выглядит так float: left. Это значит, что блок будет располагаться слева.
.txt {font-family: Tahoma, Geneva, sans-serif; font-size: 13px; color: #000; margin: 10px 10px 10px 10px;}
Остальные свойства это размер, внешние отступы, внутренние отступы, цвет фона и т.п.
На этом все. Сохраняем .CSS – файл, и запускаем наш .HTML – файл. Смотрим что получилось. Если вы все сделали правильно, то у вас должно получиться все так же, как и на схеме: