ウィンドウ上の幅を縮小するdivを取得しようとしています

Question

今私は馬鹿のように感じます。とにかく - ページには3つの列があります。左右は固定幅であり、そのままでなければなりません。私はブラウザのウィンドウのサイズを変更するには、中央の列のサイズを変更する必要があります。私は知っていることを知っている、これは厳しいものではありませんが、それは私のために起こっていないだけです。相続人のhtml：

<div class="bottom_content"> 

<div class="left_col"> 

<p>Keeping up with Commpro.Biz</p> 

<div class="s_n_icons"> 

<img src="images/facebook.png" alt="facebook" /> 

<img src="images/flickr.png" alt="flickr" /> 

<img src="images/twitter.png" alt="twitter" /> 

<img src="images/youtube.png" alt="youtube" /> 

</div> 

<p>User Name:<input ="text" size="20" name="username" value="" /></p> 

<p>Password:<input ="text" size="20" name="password" value="" /></p> 

<input type="button" value="submit" name="submit" /> 

<p><a href="#">Forgot Username or Password?</a> 

<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p> 

<div id="twitter"></div> 

</div> 

<div class="center_col"> 

<p>What's Hot on Commpro.Biz</p> 

<div class="hot_item"> 
hot item hot item hot item hot item hot item hot item hot itemhot item hot item 
</div> 

</div> 

<div class="right_col"> 

<p>Our Partners</p> 

<img src="images/BW.jpg" alt="Warren Buffett" /> 

<img src="images/IR_PRNewswire.gif" alt="newswire" /> 

<img src="images/Sysomo.gif" alt="Sysomo" /> 

</div> 

<div id="footer"> 
    <p>Copyright 2011 by CommproBiz</p> 
</div> 
</div> 

と何が起こっている.CSS

.left_col{ 
float:left; 
width:190px; 
height:auto; 
padding-right:5px; 
} 

.center_col{ 
float:left; 
width:auto; 
padding:0 10px; 
} 

.hot_item{ 
width:auto; 
background-color:red; 
} 

.hot_item a{ 
text-decoration:none; 
} 

.hot_item img{ 
float: right; 
vertical-align: top; 
} 

.right_col{ 
float:right; 
width:250px; 
height:auto; 
padding-left:5px; 
} 

.right_col img{ 
margin:5px; 
} 

は、中央コルではほとんどのコンテンツと、3つの列が振る舞うということです。一定量以上のコンテンツが入ると、それは左の列の下に落ち、右の列は下がります。

Answer 1

要素を浮動させる場合は、幅を指定する必要があります。あなたがそうしないと、ブラウザが動作する特定の方法がないので、すべてのブラウザが異なる動作をする可能性があります。

あなたができることは、幅にパーセンテージの幅を与えることです。左は10％中70％右20％です。

右の左の列に固定幅が必要な場合。 right-colのhtmlをcenter-colの上に移動する必要があります。その後、CSSで浮動小数点数をcenter-colで削除して余白を残してください：left：195px; margin-right：255ピクセル。

Answer 2

私はclear:both;プロパティを使用して左側のサイドバーの下に著作権情報を表示しています。ページにコンテンツが埋め込まれると、著作権は低くなります。その後、

<div class="bottom_content"> 
<div class="left_col"> 
<p>Keeping up with Commpro.Biz</p> 
<div class="s_n_icons"> 
<img src="images/facebook.png" alt="facebook" /> 
<img src="images/flickr.png" alt="flickr" /> 
<img src="images/twitter.png" alt="twitter" /> 
<img src="images/youtube.png" alt="youtube" /> 
</div> 
<p>User Name:<input ="text" size="20" name="username" value="" /></p> 
<p>Password:<input ="text" size="20" name="password" value="" /></p> 
<input type="button" value="submit" name="submit" /> 
<p><a href="#">Forgot Username or Password?</a> 
<p>Click <a href="#">here</a> to sign up to receive the Commpro.Biz newsletter.</p> 
<div id="twitter"></div> 
</div> 
<div class="right_col"> 
<p>Our Partners</p> 
<img src="images/BW.jpg" alt="Warren Buffett" /> 
<img src="images/IR_PRNewswire.gif" alt="newswire" /> 
<img src="images/Sysomo.gif" alt="Sysomo" /> 
</div> 
<div class="center_col"> 
<p>What's Hot on Commpro.Biz</p> 
<div class="hot_item">hot item hot item hot item hot item hot item hot item hot itemhot item hot item</div> 
</div> 
<div id="footer"> 
<p>Copyright 2011 by CommproBiz</p> 
</div> 
</div> 
</body> 

アン固定CSS：

.left_col{ 
float:left; 
width:190px; 
height:auto; 
padding-right:5px; 
}.center_col{ 
margin-left:195px; 
margin-right:254px; 
width:auto; 
padding:0 10px; 
}.hot_item{ 
width:auto; 
background-color:red; 
}.hot_item a{ 
text-decoration:none; 
}.hot_item img{ 
float: right; 
vertical-align: top; 
}.right_col{ 
float:right; 
width:250px; 
position:relative; 
left:1px; 
padding-left:5px; 
}.right_col img{ 
margin:5px; 
}#footer{ 
clear:both; 
} 

希望に役立ちます。ここ

は固定HTMLです！