脱力系備忘録BloG ホーム »CSSで2分割したいが片方のWIDTHの長さを可変にしたい

CSSで2分割したいが片方のWIDTHの長さを可変にしたい  

CSSで横にDIVなどブロック要素を分割して並べるときには「float」プロパティーを使います。

しかし、floatを使う要素にはwidthで幅を指定しなければなりません。


(例)
<div style="width: 100%;">
<div style="width: 200px; float: left;">左っぽい</div>
<div style="width: 300px; float: left;">右っぽい</div>
</div>

こうです。
ちなみに、(例)の3行目のfloatはleftでもrightでもどっちでもいいです。


さて、今回、この「右っぽい」の部分を可変にしたいと思いました。

いろいろ「あーだこーだ」やりましたが、うまくいく場合いかない場合ありまして、最終的に決着した方法が凄く簡単なやり方だったので備忘録。


(解決)
<div style="width: 100%;">
<div style="width: 200px; float: left;">左っぽい</div>
<div style="margin-left: 200px;">右っぽい</div>
</div>

簡単すぎて恥ずかしくなってしまふ。
なお、左右の間に隙間を開けたい場合はmarginの数値を大きくすればいい。


あと、clear: both;でfloatを解除することも忘れちゃいやよん。
関連記事

category: HTML・CSS

この記事へのコメント

コメントの投稿

非公開コメント

コメントは全て管理人が内容を確認してから表示されます(非公開コメント除く)。
内容によっては表示されない場合がありますことご了承願います。

プロフィール

お問い合わせ

最新記事

最新コメント

▲ Pagetop