css - 基本的なサイドバイサイドネストポジショニング

Question

HTMLとCSS。

これは、私が考えているほど難しいことではないはずです。解決策は非常に単純だと確信しています。

私は2つのことを達成しようとしています：

1）ある場所にとどまりながら、並んで座る#leftこと。理想的には、接触する単なる仕切り（テキストなし）になり、右側に3番目のdivがあります。#right.container#footer#right#topstrip#bottomstrip

#navbar2）左側と同じ高さにロゴを配置します。

Answer 1

コンテナ内で左右のdivをフロートさせてから、clearfixを使用してそれらを同じ高さにすることができます：http ：//www.webtoolkit.info/css-clearfix.html

私たち全員がこの種のレイアウトの問題に何度も遭遇するため、この手間のかかる作業を行うために、いくつかの非常に優れたcssフレームワークが作成されています。ボイラープレートではなく、コンテンツの作成に集中できます。私は個人的にyaml（http://www.yaml.de/）を使用しており、それ以来振り返っていません。心からお勧めできます。

Answer 2

テーブルを使用できます

<table width="100%" border="0">
<tr>
<td colspan="3"><div id="navbar"><img src="YOUR LOGO SOURCE HERE" align="left"/>navbar section</div></td>
</tr>
<tr>
<td><div id="left">left section</div></td>
<td><div class="container">container</div></td>
<td><div id="right">right section</div></td>
</tr>
<td colspan="3"><div id="footer">footer section</div></td>
</table>

そして、必要に応じてすべての幅と高さを変更できます<TD>テーブルはページ全体の幅に設定され、height="100%"テーブルタグに追加するか、カスタムの幅と高さを追加できます. これborder="0"を変更してborder="1"、テーブルの制限などを表示できます。

楽しむ ：）