HTML, CSS 2カラム、中央寄せで片方の背景をいっぱいに

WEBサイトにて添付画像のようなレイアウトは実現可能でしょうか。

kunai

2016/09/02 08:37

このままだと丸投げだと言われるだけですので、ご自分でやってみた結果をまず提示し、それの何が問題なのかを問うた方が良いかと思います。

kunai

2016/09/02 08:38

ちなみに、可否で言えば勿論可能です。

kei344

2016/09/02 09:47

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答1件

HTML
1<style type="text/css">
2#main {
3	min-width:520px;;
4	max-width:720px;;
5	text-align: center;
6	margin: 0 auto;
7}
8#left {
9	float:left;
10	color:#FFFFFF;
11	background-color:#000000;
12	margin-right: 20px;
13	width:200px;
14	height:200px;
15	line-height: 200px;
16	font-weight: bold;
17}
18#right {
19	float:left;
20	min-width:300px;
21	max-width:500px;
22	height:200px;
23}
24#right_top {
25	background-color:#FA3838;
26	margin-bottom: 10px;
27	height: 50px;
28	line-height: 50px;
29}
30#right_bottom {
31	max-width: 200px;
32	text-align: left;
33	margin-right: auto;
34}
35</style>
36<section>
37	<div id="main">
38	<div id="left">IMG</div>
39	<div id="right">
40		<div id="right_top">見出し</div>
41		<div id="right_bottom">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
42	</div>
43	</div>
44</section>