[CSS]雑誌風のレイアウトがきた、どう実装する -解答編

昨日のエントリー「雑誌風のレイアウト、さぁどう実装する？」の解答編です。

雑誌風のレイアウトは、下記のように2カラムのテキストの真ん中上に画像を配置したものです。

[ad#ad-2]

まずは、HTMLから。
画像を二つに切るとかは、無しですよ。

HTML

各パラグラフをdiv要素で内包し、画像とそのdiv要素をdiv要素で内包して実装します。

<div id="page-wrap">
	<img src="http://placekitten.com/250/250" id="logo">
	<div id="l">
		<p>左のテキスト</p>
	</div>
	<div id="r">
		<p>右のテキスト</p>
	</div>
</div>

これに、フロートと疑似要素を使用して、実装します。

CSS

まず、画像を絶対位置で配置します。
そしてフロートを使いますが、ポイントとなるのは下3行です。疑似要素に画像の高さと半分の幅を指定します。

#page-wrap { width: 60%; margin: 80px auto; position: relative; }
	
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }

#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }

#l:before, #r:before { content: ""; width: 125px; height: 250px; }

#l:before { float: right; }
#r:before { float: left; }

[ad#ad-2]

実装のイメージは下記のようになります。

実装のイメージ

実際の実装は、下記ページでみることができます。

Faking 'float: center' with Pseudo Elements
デモページ

対応ブラウザは疑似要素に対応しているIE8+, Firefox, Chrome, Safari ,Operaになります。