JobHub.ru — система автоматизации и управления бизнесом

Двухколоночный макет без отрицательного отступа

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

Есть структура

<div style="float:left; width:200px;">
	sidebar
</div>
<div style="float:right; width:100%; margin-right:-200px;">
	<div style="margin-right:200px;">
		content
	</div>
</div>

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

Пост для себя, чтобы не рыскать по интернетам. Детальное описание здесь http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

<style>
	li {
		width:200px;
		min-height:250px;
		border:1px solid #000;
		display:-moz-inline-stack;
		display:inline-block;
		vertical-align:top;
		margin:5px;
		zoom:1;
		*display:inline;
		_height:250px;
	}
</style>
<li>
	<div>
		<h4>This is awesome</h4>
		<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75" />
	</div>
</li>