私は実際にdivを操作しようとしていますが、次の単純なテーブルレイアウトに相当するものを取得できないようです:

残しておきたい重要な要素：

1. 実際のコンテンツは固定幅です。(この場合、750px)

2. ヘッダーとフッターの背景は、ページ幅の 100% に拡張されます。

3. メイン コンテンツの背景は水平方向には拡張されませんが、ヘッダーとフッターの間の領域を埋めるために垂直方向に拡張されます。

4. メインコンテンツの高さがそれほど高くない場合でも、フッターは常にページの下部にあります。

私は多くの戦略を試しましたが、div を使用してページの下部にフッターを保持する少なくとも 2 つの異なる方法を見つけました。残念ながら、メイン コンテンツが div にある場合、短いページのヘッダーとフッターの間のスペースを埋めるために垂直方向に拡張する方法はないようです。

編集: quirks モードでなくても機能することを示すように例を変更しました。上記が有効です。

編集2：

ほとんどの場合、javascript を使用してこれを行う方法を見つけました。だから、私の質問は次のとおりだと思います：javascriptなしでこれを行うにはどうすればよいですか。これが私が使用しているものです（これはfirefoxでのみ機能すると確信していますが、修正できます）：

「コンテンツ」は、展開したいメインのコンテンツ div を指定します。

Internet Explorer で動作する CSS を使用して、ホバー時に行の強調表示を追加したいと思います。私は次のことを試しました：

これは、Opera、Firefox、および Safari では機能するようですが、IE では機能しません。

解決策はありますか、それとも唯一の解決策は JavaScript ですか?

絶対位置にある固定サイズのDIV内に表示したいHTMLエディターウィジェットがあります。ただし、DIVの絶対サイズは事前にわかりません。ユーザーがウィンドウのサイズを変更した場合など、サイズが変わる可能性があります。

当然のことながら、エディターにはコントロールと編集可能な領域があります。それぞれに独自のDIVがあります。コントロールが必要なだけのスペースを占有し、編集可能な領域が残りのスペースを埋めるようにしたいです。

テーブルを使用する場合、これは非常に簡単に実現できます。境界線とパディングとマージンをオフにして、各DIVを独自の行のセルにスローし、コントロールDIVの最大高さをいじるだけです。これはどのように見えるかです：

ベーステーブルhttp://img407.imageshack.us/img407/8435/table1.png

ウィンドウのサイズが別の方法で変更された同じテーブルhttp://img264.imageshack.us/img264/6438/table2p.png

スクロールバーを表示せずに、編集可能なセクションが可能な限り多くのスペースを占めることに注意してください。

私はさまざまなCSSの例を試してみましたが、編集可能なDIVを親の高さからコントロールの高さを引いたものにするために、サイズ変更時にJavaScriptを実行しないと何も機能しないようです。

もちろん、親DIVにdisplay：tableを持たせ、子DIVにdisplay：table-row DIVをラップさせ、それ自体にdisplay：table-cellを持たせることもできますが、その場合は、まったく同じです。 TABLE、TR、およびTDを使用しますが、CSSの純度のために10倍醜いです。（なぜわざわざ？）

それで、display：table＆friends、TABLE / TR / TD、JavaScriptを直接使用せずに、これを行う純粋なCSSの方法はありますか？言い換えると、純粋なCSSの言い方では、DIV1は可能な限り垂直方向のスペースを占有せず、DIV2は親要素内の残りの垂直方向のスペースを占有しますか？

そうでない場合は、「純粋なCSS」の考え方に同意するのをやめる準備ができています。それは私に十分な悲しみを引き起こしましたが、開発者やエンドユーザーの利益はほとんどありませんでした。

私のHTMLドキュメントには、2つの列と複数の行を持つテーブルがあります。cssを使用して1列目と2列目の間のスペースを増やすにはどうすればよいですか？「margin-right：10px;」を適用してみました 左側の各セルに適用されますが、効果はありません。

テーブルの代わりに div を使用して、コンテンツの周りにボックスのスタイルを設定しようとしています。コンテンツは任意のサイズにすることができ、ブラウザのサイズを任意に変更できる必要があります。コンテンツを含めるには、背景色と境界線が必要です。これはテーブルでうまく機能します。div を同じように動作させるにはどうすればよいですか?

注: 改行しないスペースが失われていたため、「_」を追加しました。

サンプルページ

サンプル画像

_{(ソース: c3o.com )}

コンテンツ：

ページのレイアウトとして機能するhtmlテーブルがあります（私が知っている悪い習慣です）。この表は次のようになります。

1行目に非常に大きくなる可能性のある検証エラーメッセージを追加したので、次のようになりました。

デザインを機能させるために、検証メッセージを含むセルに colspan を追加して、テーブル全体にまたがるようにしました。テーブルをオーバーフローしないほど短いエラー メッセージで機能します。それ以外に私は得る：

4 行目は完全にめちゃくちゃです。同じ列の他のセルのスペースを拡大する代わりに、エラー メッセージのセルの内容がテーブルからはみ出すように指定する方法はありますか? 多分いくつかの魔法のCSS？

複製:

• HTML のレイアウトにテーブルを使用しないのはなぜですか?
• DIV 対テーブルまたは CSS 対愚かであること

最近、table タグではなく div を使用して、ページをよりブラウザらしくするという話がよくあります。なぜdivの方が良いのですか？

エラー ラベルはテーブルの幅まで表示されます。このように：

代替テキスト http://img518.imageshack.us/img518/8864/width1.jpg

ラベルのテキストまで表示するにはどうすればよいですか? これはcssです：

従来のタグを使用して設計された Web サイトを持っていますが、CSS ベースのタグに変換する必要があります。一度に1つのタグを取得して変換するよりも、これを行うためのより良い方法(フリーソフトウェア/ツール)はありますか?