やっとテンプレートができそうだという話

2013.02.19 Tuesday

0
    以前、テンプレ合宿で作り始めたテンプレートが、ようやく完成しそうです(遅)

    カラーミーショップのテンプレートを作成するのは初めてなので、
    色々勝手が分からず、チビチビやってると時間がかかってしまいました。
    結構ガシガシいじり倒せるんだなぁ。
    カスタマイズ用のシンプルなテンプレートを利用しました。


    なんとかjQueryもきちんと動くようになり、完成間近かと思いきや、壁にぶち当たりました。
    (もう何度もぶち当たってる)

    2カラムレイアウトで作っているのですが、
    float:left; した中に、さらに float:left; させて、clearfixさせると、なぜかバコっと余白が空くのです。
    なんなのこれ!こんなホワイトスペースいらないよっ!!!


    こんなかんじにしたいのに↓




    _人人人人人人人_
    > 突然の余白 <
     ̄Y^Y^Y^Y^Y^Y ̄





    何なんだろう・・・
    なんか閉じタグがミスってるのかとか、clearしすぎてるのかとか、色々見たけどそうでもなさそう。


    ちなみに、だからと言ってclearしないとやっぱりこうなる




    なんなの。 なんだっていうの。


    多分、テンプレートが複数に分かれていることが影響してそう。
    ただ、色んな事情があって、やっぱりfloat二重で解決したい(私のHTML力・・・)


    色々試してた中で気づいたのだけど、どうやら左カラムの高さが影響しているらしい。





    いよいよ心が折れそうになったとき、私は気付いた。あるサイトの存在に。


    http://www.google.co.jp



    「clearfix スペース 影響 カラム」 でググって出てきた以下の記事で解決しました!

    「【CSS】float:left; を使用した2カラム、本文中でclearすると間が空いてしまう」
    http://okwave.jp/qa/q5087003.html


    解決した!!!↓



    clearしないと被ってしまっていたピンク色の部分に、

     width: 100%; ←floatを抑止
     display: table; ←内容に合わせてブロック拡大(はじめて使った)


    これを書くだけでOK。
    なるほどね〜〜〜〜〜確かに無理矢理感あるけど、本当に助かった・・・!

    質問者さん、#4さん、本当にありがとう!とここで御礼を言っておきますmm
    関連する記事
    コメント
    コメントする
    トラックバック
    この記事のトラックバックURL