CSS初心者です。各ブラウザに対応した記述の仕方をご教授ください！

質問

CSSを独学で学んでいる初心者です。
floatを使ってブロックを並べて配置させたいのです。

IE6で見てみたところ、なんとか思ったとおりに表示されたのですが
safari、Netscapeなど他のブラウザで見てみるとどうしてもくずれてしまって思ったとおりに表示されません。

http://homepage2.nifty.com/meary/renshu/renshu.html

この、「mini_box1」と「mini_box2」を並べて表示させたいのです。
floatを使わなくても構いません、何か良い方法がありましたらご教授お願いします！
もしくは私の記述で間違っているところなどもありましたら教えてくださるととても助かります。
☆ＨＴＭＬ☆
<div class="mini_box1">
<a href="#">
<p class="box_moji">mini_box1</p></a>
</div>
<div class="mini_box2">
<a href="#">
<p class="box_moji">mini_box2</p></a>
</div>

☆ＣＳＳ☆
.mini_box1
{
width:330px;
height:83px;
margin:0px 0px 0px 0px;
font-size:11px;
border-color: #ccc;
border-style: solid ;
border-width: 1px;
display: block;
float: left;
}

.box_moji
{
word-break: break-all;
}

.mini_box2
{
width:330px;
height:83px;
margin:0px 0px 0px 0px;
font-size:11px;
border-color: #ccc;
border-style: solid ;
border-width: 1px;
display: block;
}

回答No.2

xs200 · ベストアンサー

文法エラーがあります。
<a>～</a>内に<p>～</p>を書くことはできません。

お礼

質問者です！
お礼が遅くなりましてごめんなさい。
文法チェックありがとうございます！！(;ω;)
右側に何もこないのでこの場合はいらないのかと思ってました；

ふんふんなるほど！

回答No.3

xs200

追加。
.mini_box2にfloat:left;がありません。
横並びにするなら入れてください。
その後、clearを忘れずに。

お礼

間違って↓にここのfloatに関するお礼をつけてしまいました…

続けての文法ミスの訂正ありがたいです！！！
勉強になりましたよー！！
ご指摘いただいた２点を修正しました＾＾

回答No.1

koke29

方法としては、
・ブラウザごとにCSSの記述を書き分ける
・どのブラウザでもそれなりに見えるように調整する（妥協する）
くらいでしょうか

ブラウザ毎にCSSを切り替える方法が載ってたサイトがあったので
参考に貼り付けておきますね

本気で取り組むなら「クロスブラウザ」のキーワードで検索してみると
色々参考になるサイトが出てきますよー

あと、CSSレイアウトの勉強が一通り済んだ時に見て目からウロコが
飛び出たサイトも参考に
http://adp.daa.jp/archives/000309.html
まさにdiv厨と化していた自分の考え方が凄く変わったサイトです
※ 参考ですので、鵜呑みにする必要はありません。

参考URL：

http://www.designwalker.com/2006/12/css.html

お礼

お答えありがとうございます～！* ゜ + 。・゜・。・ヽ(*^∀^)ノ
お返事が送れてごめんなさい！
CSSを切り替える方法って以外と簡単だったんですね。ふんふん！
なるほど～

クロスブラウザという単語も初耳だったので本当にありがたいです。
そういった内容を知りたいのに今までうまくググれなかったので助かりました。

私も今現在まさにdiv厨（！>w<）と化してます。
コーディングってほんとーに色んなやり方があるんですね！
まだちらりとしか見てないのですが時間があるときにじっっくり拝見します♪勉強になりますー