Выбор способа разметки двух колонок

Kenshi24 · February 4, 2014

Имеется: два столбца, левый - фиксед, правый - резинка, обернуты контейнером.

Требуется: подобрать способ разметки, желательно простой и удобный, или указать на достоинства и недостатки приведенных ниже способов, найденных мной в интернете.

1й: http://jsfiddle.net/2ydUW/3/

2й: http://jsfiddle.net/2ydUW/2/

HTML:

<!DOCTYPE html><html>	<head>		<title>var. 2</title>		<link rel="stylesheet" href="css/main.css">		<script src=""></script>	</head>	<body>		<div class="wrap">			<div class="leftColumn">				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis odio odio, vel dignissim elit sodales eu. Phasellus in lobortis nisl. In nunc lectus, sollicitudin a massa et, gravida malesuada nibh. Nulla sed metus sed ipsum gravida tincidunt ac sed nulla. Phasellus sed ultricies mauris, sit amet scelerisque eros. Quisque eu condimentum nibh.			</div>			<div class="rightColumn">				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis odio odio, vel dignissim elit sodales eu. Phasellus in lobortis nisl. In nunc lectus, sollicitudin a massa et, gravida malesuada nibh. Nulla sed metus sed ipsum gravida tincidunt ac sed nulla. Phasellus sed ultricies mauris, sit amet scelerisque eros. Quisque eu condimentum nibh.			</div>			<div class="clear"></div>		</div>	</body></html>

Ну и собственно 2 варианта CSS, первый проще, но раз есть второй, значит для чего-то он нужен.

html, body {   height: 100%;   background-color: #f2f3f4;   font-size: 95%;}.leftColumn {   width: 15em;   float: left;   background: #49948b;   color: #fff;}.rightColumn {    margin-left: 15em;    background-color: #457fa3;    color: #fff;}.wrap{    background-color: #aaa;}.clear {    clear: both;    float: none;    font-size: 0;    height: 0;    line-height: 0;}

html, body {    height: 100%;    background-color: #f2f3f4;    font-size: 95%;}.leftColumn {    float: left;    margin: 0 0 0 -15em;    overflow: visible;    width: 15em;    background-color: #49948b;    color: #fff;    position: relative;}.rightColumn {    float: left;    margin-right: -100%;    width: 100%;    background-color: #457fa3;    color: #fff;    position: relative;}.wrap{    padding-left: 15em;    background-color: #aaa;}.clear {    clear: both;    float: none;    font-size: 0;    height: 0;    line-height: 0;}

Edited February 5, 2014 by Kenshi24

y6uBaToP · February 4, 2014

Первый способ работает

Второй - то же самое, только с непонятной игрой отступов, как будто поставили задачу сделать 2 колонки, но правая width:100%;

Kenshi24 · February 5, 2014

On 2/4/2014 at 3:14 PM, y6uBaToP said:
Первый способ работает
Второй - то же самое, только с непонятной игрой отступов, как будто поставили задачу сделать 2 колонки, но правая width:100%;

Я не понимаю еще зачем там нужен margin-right: -100%;

Так что, какой способ валиднее и какой лучше использовать?

y6uBaToP · February 5, 2014

http://htmlbook.ru/layout/fiksirovannaya-shirina-navigatsiya-sleva

Как в 1-м

grusenka · February 6, 2014

Более валидный способ тот, который проходит валидацию без ошибок или с их меньшим количеством. В первом способе нет смысла в указании маргина для правой колонки, поскольку в левой колонке задан флоат и указана ширина. Во-втором способе, соответственно, нет смысла указывать для правой колонки ширину, маргин и флоат.

Edited February 6, 2014 by grusenka

Sign In

Выбор способа разметки двух колонок

Question

Kenshi24

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

y6uBaToP

Link to comment

Share on other sites

Kenshi24

Link to comment

Share on other sites

y6uBaToP

Link to comment

Share on other sites

grusenka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information