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

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

http://homepage2.nifty.com/meary/renshu/renshu.h …

この、「mini_box1」と「mini_box2」を並べて表示させたいのです。
floatを使わなくても構いません、何か良い方法がありましたらご教授お願いします!
もしくは私の記述で間違っているところなどもありましたら教えてくださるととても助かります。
☆HTML☆
<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>

☆CSS☆
.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;
}

A 回答 (3件)

文法エラーがあります。


<a>~</a>内に<p>~</p>を書くことはできません。
    • good
    • 0
この回答へのお礼

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

ふんふんなるほど!

お礼日時:2009/05/14 20:57

追加。


.mini_box2にfloat:left;がありません。
横並びにするなら入れてください。
その後、clearを忘れずに。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2009/05/14 21:01

方法としては、


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

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

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

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

参考URL:http://www.designwalker.com/2006/12/css.html
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2009/05/14 22:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


このカテゴリの人気Q&Aランキング