2つの要素を親のサイズに従う方法を教えてください。

基本的には、これも私がどのようにしたいのか分かりません。ナビゲーションボタンはちょうど右側に浮かんでいて、親divの内部にはありません。2つの要素を親のサイズに従う方法を教えてください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>UI Test</title> 
    <link type="text/css" rel="stylesheet" href="main.css" /> 
</head> 

<body> 
    <div id="container"> 
     <div id="header"> 
      <div class="first"> 
       First column stuff 
      </div> 

      <div class="second"> 
       <a href="#" class="nav_button">Current Projects</a> 
       <a href="#" class="nav_button">Build New Project</a> 
       <a href="#" class="nav_button">Fund Projects</a> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

と私のmain.cssファイルは少し次のようになります：私は持っている HTMLがある

#header { 
    display: block; 
    background-color: #2a2626; 
    color: #fff; 
    border-bottom: 4px solid #000; 
    border-top: 8px solid #000; 
    padding-top: 8px; 
} 

.first { 
    float: left; 
    width: 20%; 
} 

.second { 
    float: right; 
} 

.clear { clear: both; } 

.nav_button { 
    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     right bottom, 
     color-stop(0.14, rgb(44,132,145)), 
     color-stop(0.79, rgb(103,191,204)) 
    ); 
    background-image: -moz-linear-gradient(
     left center, 
     rgb(44,132,145) 14%, 
     rgb(103,191,204) 79% 
    ); 
    -moz-box-shadow: inset 0 0 8px rgba(255,255,255, 1); 
    -webkit-box-shadow: inset 0 0 8px rgba(255,255,255, 1); 

    color: white; 
    font-family: Pare, Helvetica; 
    font-size: 24pt; 
    text-align: center; 
    text-decoration: none; 

    padding: 27px; 
}

は、ここでそれはやっているものです：http://i.imgur.com/PU400.png あなたは高さが自動ではありません見ることができるように調整され、私はしばらくそれをやろうとしてきました。問題は何ですか？

出典

2011-07-08 Brandon

古い学校の方法：<br style="clear: both" />のように、<div class="second">の後にクリアする要素を置き、親要素がボタンを完全に囲むようにします。

新しい方法：#headerをoverflow: autoにしてください。

出典

2011-07-08 21:20:12

オーバーフロー：自動の結果はスクロールバーになります...それを修正します。だから私はそれに高さを定義すると思います。 – Brandon

それは働いた！ありがとうございました – Brandon

2つの要素を親のサイズに従う方法を教えてください。

答えて

関連する問題