obenjiro/crossbrowser-column.css

## crossbrowser-column.css
/* you can test it here
** http://jsbin.com/oWepeVI/4
**
** you can see some results here http://www.browserstack.com/screenshots/b82dc9a833f2aa3ec76a3737ba48d942a19cc5f2
*/

.article .textpart-left {
  position: absolute;
  width: 50%;
  margin: 0;
  padding-left: 0;
  left: 0;
}

.article .textpart-right {
  position:relative;
  left: 50%;
  width: 50%;
}

.article .textpart {
  display: block;
  padding: 10px;
  max-width: 500px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /*Firefox 1-3*/
  -webkit-box-sizing: border-box; /* Safari */
}


/* IE7 style */
*:first-child+html .article .textpart-left {
  width: 460px;
}

*:first-child+html .article li {
  list-style-type: circle;
}

/* IE6 style */
* html .article .textpart-left {
  _width: 460px;
}

* html .article li {
  _list-style-type: circle;
}

.article {
  position: relative;
}

.article h1 {
  max-width: 50%;
}

.article p:first-letter {
  margin-left: 20px;
}

.article p {
  font-size: 18px;
  font-family: Verdana, Geneva, sans-serif;
}

.article ul {
  margin 0;
  padding: 0;
}

.article li {
  list-style-type: none;
  font-size: 18px;
  font-family: Verdana, Geneva, sans-serif;
}

.article ul li:before{ content:"—"; position:relative; left:-5px;}
.article ul li{ text-indent:-20px; }

.article .dashed {
  border-bottom: 1px dashed black;
}

## crossbrowser-column.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS Bin</title>
</head>
<body>

  <div class="article">
    <h1>Тема: «Сюжетный анапест:
    основные моменты»</h1>
    <span class="textpart textpart-left"><p>Нельзя восстановить истинной хронологической последовательности событий, потому что мелькание мыслей параллельно. Структура аллитерирует мелодический реформаторский пафос, однако дальнейшее развитие приемов декодирования мы находим в работах академика В.Виноградова. Аллюзия наблюдаема. Аллитерация, как бы это ни казалось парадоксальным, параллельна. Мифопорождающее текстовое устройство прочно вызывает эпитет, причём сам Тредиаковский свои стихи мыслил как “стихотворное дополнение” к книге Тальмана.</p><p>
Речевой акт традиционно осознаёт музыкальный дольник, но не рифмами. Различное расположение просветляет мелодический образ, таким образом постепенно смыкается с сюжетом. Силлабо-тоника, в первом приближении, просветляет мелодический ямб, таким образом в некоторых случаях образуются рефрены, кольцевые композиции, анафоры.</p></span>
  <span class="textpart textpart-right "><p>Представленный лексико-семантический анализ является психолингвистическим в своей основе, но мифопорождающее текстовое устройство аллитерирует мифологический генезис свободного стиха, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания.</p><p>
    Драма, по определению отражает брахикаталектический стих, хотя в существование или актуальность этого он не верит, а моделирует собственную реальность. Лексика осознаёт литературный палимпсест, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания.</p>
    <ul>
     <li>
        Курит ли трупка мой
      </li>
      <li>
        <a href="#">из трупка тфой пихтишь</a>
      </li>
      <li>
        <span class="dashed">Или мой кафе пил</span>
      </li>
      <li>
        тфой в щашешка сидишь
      </li>
    </ul></span>
  </div>
</body>
</html>
	/* you can test it here
	** http://jsbin.com/oWepeVI/4
	**
	** you can see some results here http://www.browserstack.com/screenshots/b82dc9a833f2aa3ec76a3737ba48d942a19cc5f2
	*/

	.article .textpart-left {
	position: absolute;
	width: 50%;
	margin: 0;
	padding-left: 0;
	left: 0;
	}

	.article .textpart-right {
	position:relative;
	left: 50%;
	width: 50%;
	}

	.article .textpart {
	display: block;
	padding: 10px;
	max-width: 500px;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /Firefox 1-3/
	-webkit-box-sizing: border-box; /* Safari */
	}


	/* IE7 style */
	*:first-child+html .article .textpart-left {
	width: 460px;
	}

	*:first-child+html .article li {
	list-style-type: circle;
	}

	/* IE6 style */
	* html .article .textpart-left {
	_width: 460px;
	}

	* html .article li {
	_list-style-type: circle;
	}

	.article {
	position: relative;
	}

	.article h1 {
	max-width: 50%;
	}

	.article p:first-letter {
	margin-left: 20px;
	}

	.article p {
	font-size: 18px;
	font-family: Verdana, Geneva, sans-serif;
	}

	.article ul {
	margin 0;
	padding: 0;
	}

	.article li {
	list-style-type: none;
	font-size: 18px;
	font-family: Verdana, Geneva, sans-serif;
	}

	.article ul li:before{ content:"—"; position:relative; left:-5px;}
	.article ul li{ text-indent:-20px; }

	.article .dashed {
	border-bottom: 1px dashed black;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<div class="article">
	<h1>Тема: «Сюжетный анапест:
	основные моменты»</h1>
	<span class="textpart textpart-left"><p>Нельзя восстановить истинной хронологической последовательности событий, потому что мелькание мыслей параллельно. Структура аллитерирует мелодический реформаторский пафос, однако дальнейшее развитие приемов декодирования мы находим в работах академика В.Виноградова. Аллюзия наблюдаема. Аллитерация, как бы это ни казалось парадоксальным, параллельна. Мифопорождающее текстовое устройство прочно вызывает эпитет, причём сам Тредиаковский свои стихи мыслил как “стихотворное дополнение” к книге Тальмана.</p><p>
	Речевой акт традиционно осознаёт музыкальный дольник, но не рифмами. Различное расположение просветляет мелодический образ, таким образом постепенно смыкается с сюжетом. Силлабо-тоника, в первом приближении, просветляет мелодический ямб, таким образом в некоторых случаях образуются рефрены, кольцевые композиции, анафоры.</p></span>
	<span class="textpart textpart-right "><p>Представленный лексико-семантический анализ является психолингвистическим в своей основе, но мифопорождающее текстовое устройство аллитерирует мифологический генезис свободного стиха, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания.</p><p>
	Драма, по определению отражает брахикаталектический стих, хотя в существование или актуальность этого он не верит, а моделирует собственную реальность. Лексика осознаёт литературный палимпсест, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания.</p>
	<ul>
	<li>
	Курит ли трупка мой
	</li>
	<li>
	<a href="#">из трупка тфой пихтишь</a>
	</li>
	<li>
	<span class="dashed">Или мой кафе пил</span>
	</li>
	<li>
	тфой в щашешка сидишь
	</li>
	</ul></span>
	</div>
	</body>
	</html>