overflow: hidden;

clearfixの代わりみたいなテク

floatの指定が有る要素（ここでは画像）はfloatで浮いて存在しなかったことになっているから、親要素は高さを算出しません。

そこの親要素にoverflow: hidden;を指定すると…

サンプル

overflow: hidden;は、はみ出た部分を表示しないという使用方法なのになぜ？と思いますが、ここに理由が書いてありました。

けっこう使えますね。これ。

-参考元-
とっても使えるoverflowプロパティ

フォーム sizeとcolsの違い

フォームタグの"size"属性と"cols"属性の違い


ふと疑問に思ったので調べて見た。

size属性
テキストフィールドなどの入力欄の幅(maxlength属性を指定しないと最大文字数になる)

cols属性
テキストエリア（複数行テキストボックス)にrows属性と必須で記述する平均的な文字幅を基準とした文字数（閲覧環境や記入内容で変動する）→数値を指定することで表示サイズが決まるが、入力可能な文字数を制限するものではない。

サンプル


独学で勉強してきたから、抜かしてきたこういう基本的な小さいことを一つ一つ拾っていくのは大事だね。

position プロパティ

ポジションをマスターできたらCSSのレイアウト配置はかなり自由度が増すので勉強してみた。

floatとの違いはカラム落ちが発生しないというところです。

図解だとこんな感じ

・static

ポジションに何も指定しないとこれ。標準。


・relative（相対的）

ボックスが本来あるべき位置からtop/right/left/bottomで位置を移動し配置される。


・absolute（絶対的）

親ボックスを基点にそこからの位置を指定し移動する。ちなみにstatic（デフォルト）以外のrelative, fixed, absoluteが親ボックスに指定されていることが条件。


・fixed（位置固定）

あるボックスを基点にそこからの位置を指定する。が、position:absolute;との違いは、ブラウザで見た時、スクロールしてもずっと固定で同じ位置を保持し表示されるというとこ。（動かない）

ところがこのfixedはやっぱり面倒なことにIE6ではバグがあって使えない。使うには下記の設定が必要です。

IE6でposition:fixedを実現させるCSS

html, body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
}

div#box {
position: fixed!important;
position: absolute;
}


div#boxがfixedさせたい部分です。あとはtopやleft、bottomやleftを指定することで位置を決める。

ただし、利用するときは以下のような注意点がある。

※IE6でposition:fixedするときの注意

後方置換ではfixedが適応されない（標準準拠でのレンダリング時にのみ対応）
xml宣言などをしているとこのposition:fixedが適応されません。
使用する場合はHTMLの方でも標準準拠であるようにしておきましょう。

positionを使ったらx-indexで重なり順序を指定するといいでしょう。
指定する数字が大きいと上に重なります。