2016-05-05 4 views
0

私はメインのコンテンツを左側に、navを右側に配置しようとしています。現在、ナビは一番下に座っています。誰かが私が間違ってどこに行ったのか教えてください。ナビが正しくフローティングしていない

コード(http://codepen.io/kiddigit/pen/PNXRVE

* { 
    font-family: garamond; 
    line-height: 1.9em; 
    color: #212121; 
} 
.wrapper { 
    width: 75%; 
    margin: 0 auto; 
    border: 1px solid blue; 
    padding: 10px; 
    overflow: hidden; 
} 
.wrapper2{ 
    overflow: scroll; 
} 
.main_content { 
    float: left; 
} 
.main_text { 
    float: left; 
} 
.nav { 
    float: right; 
    padding-top: 10px; 
    width: 25%; 
} 
header { 
    border-bottom: 5px solid; 
    margin-bottom: 10px; 
    overflow: hidden; 
} 
header ul { 
    list-style-type: none; 
    margin-top: 20px; 
    display: inline; 
} 
header li { 
    float: right; 
    margin-right: 20px; 
    width: 110px; 
} 
header li:first-child { 
    margin-right: 0; 
} 
header li a { 
    display: block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
header li a:hover { 
    background-color: #111; 
    color: white; 
} 
header h1 { 
    float: left; 
    text-align: left; 
    margin: 0 170px .5em 0; 
    line-height: 0; 
    font-size: 2em; 
} 
h1 a { 
    text-decoration: none; 
    color: black; 
} 

/*drop-down menu styles begin*/ 
.dropbtn { 
    color: black; 
    padding: 13px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 
.dropdown { 
    display: inline-block; 
    float: right; 
} 
.dropdown-content { 
    display: none; 
    position: absolute; 
} 
.dropdown-content a { 
    color: white; 
    padding: 0 27.5px ; 
    text-decoration: none; 
    display: block; 
    background-color: #3f3f3f; 
} 
.dropdown-content a:hover { 
    color: #a9a9a9; 
} 
.dropdown:hover .dropdown-content { 
    display: block; 
} 
.dropdown:hover .dropbtn { 
    background-color: black; 
    color: white; 
} 
/*drop-down menu styles end*/ 

/*Right nav content starts here*/ 
.nav li { 
    list-style-type:none; 
    font-size: 1em; 
} 
.nav ul { 
    padding-left: 10%; 
    font-size: 1em; 
} 
.nav ul a:link { 
    text-decoration: none; 
    color: black; 
    font-size: 1em; 
} 
.nav ul a:visited { 
    text-decoration: none; 
    color: black; 
    font-size: 1em; 
} 
.nav ul a:hover { 
    text-decoration: none; 
    background-color: black; 
    color: white; 
    padding:3px; 
    font-size: 1em; 
} 
/*Right nav ends here*/ 

答えて

1

.main_contentwidth: 75%;を追加します。それはdivなので、デフォルトでは親コンテナの100%を占有します。

1

あなたは.main-textですが、あなたの要素はそのクラスを持っていません。それはidmain-textを持っています。また、それは幅を持たなければならない、と.main_contentを浮かべすべきではありません。

http://codepen.io/anon/pen/eZbrPd

フロートは厄介です。代わりinline-blockの使用を検討してください:

http://codepen.io/anon/pen/dMweQe

関連する問題