CSSのdivパーツの配置がうまくいきません！助けてください！！

質問

CSSのdivパーツの配置がうまくいきません！助けてください！！

完成予想図
┌―――――――――――――――――――┐
｜画像　　　　　　　　　　　　　　　　　｜
｜┌――┐　　　┌――――――┐┌――┐｜
｜｜ロゴ｜　　　｜｜　　　　　｜｜検索｜｜
｜└――┘　　　└――――――┘└――┘｜
└―――――――――――――――――――┘

現実・・
┌―――――――――――――――――――┐
｜画像　　　　　　　　　　　　　　　　　｜
｜┌――┐　　　　　　　　　　　　　　　｜
｜｜ロゴ｜　　　　　　　　　　　　　　　｜
｜└――┘　　　　　　　　　　　　　　　｜
｜┌――――――┐┌――┐　　　　　　　｜
｜｜｜　　　　　｜｜検索｜　　　　　　　｜
｜└――――――┘└――┘　　　　　　　｜
└―――――――――――――――――――┘

画像の上にロゴを配置しています。
さらにロゴの同じ高さの右側に検索窓を付けたいと思っています。

現状のCSSは、以下のようになっています。

/* ヘッダー */
div#header {background-color: #017acd;
background-image: url(sky.jpg);
padding: 28px 20px 100px}

div#header h1 {margin: 0}

div#header p {color: #ffffff;
font-size: 0.75em;
margin: 0}

htmlファイルにgoogleのサイト内検索パーツを追加しようと、

div#google {width: 240px;
margin-right: 500px}

を追加しましたが、実際はうまくいかず、ロゴの下に表示されます。
右側に移動することはできましたが、平行線上には持っていけません。

誰か助けてください・・・

HTMLファイル：

<!-- ヘッダー -->
<div id="header">
<h1><img src="logo.gif" alt="LOGO" /></h1>
<p>このサイトは、料理を扱うサイトです。</p>
<!-- SiteSearch Google -->
<div id="google">
<form method=get action="http://www.google.co.jp/search">
<input type=text name=q size=26 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="検索">
<input type=hidden name=domains value="yahoo.co.jp"><br>
<input type=radio name=sitesearch value="yahoo.co.jp" checked>Site sherch by
<img src="Logo_25gry.gif" alt="Google LOGO" align="absmiddle">
</form>
</div>
</div>

回答No.2

karita_83 · ベストアンサー

連日失礼いたします。

div#google {width: 240px;
margin-right: 500px}

のmargin-right: 500px;を消してください。

このままですと、

width 240px
＋　margin 500px

＝　　　　　740px
の要素ができてしまっているので、、
h1が入る隙間がなくなってしまっているのですね。

marginに気づかなくてすみませんでした…

＞そしてHTMLのW3Cのテスト結果はエラー９９個、ワーニング１個になりました。
＞CSSはエラーが１個、ワーニングが３個になりました・・・

ということですが、ここの部分は私からご指摘するのは難しいので、
W3Cの結果を見ながら、ご自分でちょっとずつ修正していくのが一番かな、と思います。

意外とあのサイトで言っていることってものすごい細かいことを言っていたりするので、
表示されてればいっか！な感じでしたら、あまり気にしなくてもいいかもです。
ワーニングは直したほうがいいかもですが…。

clearfixですが、
clearfixの記述をして、
<div id="header" class="clearfix">と記述すればたぶんいけるかと思うのですが・・・。

テーブルの中に入れてしまうのは、一見簡単でいい方法に見えますが、
HTMLの記述としては間違っていますので、
お時間があるときにでもfloatに挑戦してみてください（＾＾）

お礼

ありがとうござます。

テーブルのaliginが使ったら駄目とか、
いつのまにやらHTMLが使いにくくなっていました。

見えたらいいわ的に作っていたので、
width: 240px;
margin-right: 500px;も適当に突っ込んでみました。

自力でブログを作ろうとしましたが挫折しました；；
ワードプレスを利用することにします・・・

また質問すると思うのでよろしくお願いしますｍｍ

回答No.1

karita_83

前回は良回答をいただきましてありがとうございますm(_ _)m
初めてだったのでテンパりました（笑

さて、今回ですが、

div#google {width: 240px;
margin-right: 500px}
に、floatという要素を付けて浮き上がらせます。
この場合、右側へ動かしたいので

div#google {width: 240px;
margin-right: 500px;
float:right;}
とするとdiv#googleが浮き上がって右側へ移動します。

そして、画像のついている、というh1に対して、
widthを指定します。
これをしないと、h1が画面のいっぱいいっぱいにまで広がってしまうので、
div#googleの入る隙間がうまれません。

この際、おそらくはdiv#googleにfloatを指定するだけでうまくいくと思うのですが、
もしだめだったら、h1の方にもfloat:right;を指定してみてください。

そして、clearfixという技法がありますので、
それをdiv#headerに入れてください。
これをいれないと、下の要素がぐちゃぐちゃになってしまいます。
ここの説明は私がクチベタで説明ができないので
http://blog.d-spica.com/entry/070307clearfix.html
をごらんになってやってみてください。

cssは慣れると本当にいろいろなことができるようになります。
どうぞがんばって慣れて楽しんでくださいね

うまくいかなかったときは、どうなったのか、ということを教えてください。

お礼

ありがとうござます。

div#google{・・にfloat:right;を追加しました。
div#header h1{・・にwidth: 500px;を追加しました。

すると検索窓はロゴの下に表示され、画像が伸びて、画像が１枚と１枚目の上部がちょっと表示されました。

clearfixという技法のどれをdiv#headerに追加するのかさっぱりわからないので、
ネットで調べてテーブルでaligin=leftとaligin=rightで表示させました。

そしてHTMLのW3Cのテスト結果はエラー９９個、ワーニング１個になりました。
CSSはエラーが１個、ワーニングが３個になりました・・・