SQLの窓

2011年12月04日


TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する



ヘッダー
ヘッダー
ヘッダー
左サイド
左サイド
左サイド
中央
中央
中央
中央
中央
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド

下部
下部
下部
ヘッダーと下部は通常の DIV です。その間に float:left でコンテンツエリアを作成しています。残りの右サイドには position:absolute で後から追加するといいと思います。

コンテンツエリア内に左サイド、中央、右サイドとして配置して、それぞれ float がleft、left、right と設定して横に並べています

※ 実際は、BODY に margin:0px を設定してキッチリとはめ込みます
<style>
.layout {
	border: solid 1px #404040;
}
.inner {
	margin: 6px;
}
</style>
<div
	class="layout"
	style='width:598px;height:100px;background-color:#e1e1e1;'>
	<div class="inner">
		ヘッダー<br>
		ヘッダー<br>
		ヘッダー<br>
	</div>
</div>

<div style='width:600px;background-color:#e2ffe2;float:left;'>

	<div class="layout" style='width:98px;background-color:#c8e8e8;float:left;'>
		<div class="inner">
			左サイド<br>
			左サイド<br>
			左サイド<br>
		</div>
	</div>

	<div class="layout" style='width:394px;background-color:#e0c0e0;float:left;'>
		<div class="inner">
			中央<br>
			中央<br>
			中央<br>
			中央<br>
			中央<br>
		</div>
	</div>

	<div class="layout" style='width:98px;background-color:#e0f0e0;float:right;'>
		<div class="inner">
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
		</div>
	</div>

</div>

<br style='clear:both'>

<div class="layout" style='width:598px;background-color:#e1e1e1;'>
	<div class="inner">
		下部<br>
		下部<br>
		下部<br>
	</div>
</div>


【HTML / CSSの最新記事】
posted by lightbox at 2011-12-04 00:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり