position:relativeについて教えてください

質問

初めて質問します。
２つの横にならんだセルをDIVによって表示しようと思い

<DIV style="width:112px;height:20px;background-color:red;
position:relative;left:0px;top:0px;">テスト１</DIV>
<DIV style="width:112px;height:20px;background-color:yellow;
position:relative;left:112px;top:-20px;">テスト２</DIV>

というスタイルシートを作成しようとしたのですが、実際にはテスト１０まであり、一行がいかんせん長いので次のようにしてみました。
<DIV style="width:112px;height:20px;">
<DIV style="background-color:red;
position:relative;left:0px;top:0px;">テスト１</DIV>
<DIV style="background-color:yellow;
position:relative;left:112px;top:-20px;">テスト２</DIV>

同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、
<DIV style="width:112px;height:20px;position:relative;">
<DIV style="background-color:red;left:0px;top:0px;">テスト１</DIV>
<DIV style="background-color:yellow;left:112px;top:-20px;">テスト２</DIV>

この記述だと、セルが下にくっついてしまい、うまく表示できません。
positionは必ず記述しないといけないのでしょうか。できたらもっと１行を短くしたいのですが…
解決方法がわかる方いらっしゃいましたら、宜しくお願いします。

回答No.1

askaaska · ベストアンサー

> positionは必ず記述しないといけないのでしょうか
ちょっと違うわ。
まとめることはできないのよ。
２つ目のがまとめているように見えるのは
外側の<DIV>タグのスタイルによって
その内側の領域のサイズがwidth:112px;になっているだけよ。
内側の<DIV>のスタイルにwidth:112px;height:20pxが
継承されているわけじゃないわ。

<DIV>にclass属性をつけて
共通部分
width:112px;height:20px;position:relative;
をそのクラスに適用、
共通じゃない部分を
<DIV>にstyle属性で書けばいいわ。

お礼

回答有難うございます。
ためしに記述を変更してみたところ、無事出来ました！
外側のみに適用されていた状態だったのですね。
これで望み通りのＨＰが作れそうです。
有難うございました。