Почему мои вложенные divs не выглядят вложенными?

Question

Я поместил один div внутри другого, но он продолжает появляться ниже div, в который он вложен. То, что я хочу, - это заставить div для входа в navdiv, но нажмите его справа от страницы. Я могу получить его там, добавив абсолютную позицию (я тоже не уверен), но тогда он ведет себя так, как я не хочу, когда меняю размер страницы.

Пожалуйста, попробуйте объяснить, что здесь происходит, как можно проще. Благодаря! http://jsfiddle.net/viggie/5we2wxug/

#navdiv { 
    display: block; 
    background-color: blue; 
    height: 20px; 
    margin-bottom: 7px; 
} 
ul { 
    text-align: center; 
} 
#navdiv li { 
    background-color: red; 
    display :inline; 
    font-size: 1.3em; 
    padding-left: 25px; 
    padding-right: 25px; 
    vertical-align: middle; 
    margin-left:35px; 
    margin-right:35px; 
    margin-bottom:4px; 
} 
#navdiv li a:visited { 
    color: yellow; 
} 
#navdiv li:hover { 
    background-color: green; 
} 

#login { 
    padding-right: 10px; 
    padding-left: 10px; 
    background-color: yellow; 
    top: 0; 
    right: 0; 
} 
#login li { 
    verticle-align: middle; 
} 

HTML

<div id="navdiv"> 
    <ul> 
     <li><a href="http://codepen.io/viggie/pen/ragPVG">Home</a></li> 
     <li><a href="www.yahoo.com">Members</a></li> 
     <li><a href="www.espn.com">Articles</a></li> 
     <li><a href="www.google.com">Videos</a></li> 
     <li><a href="http://codepen.io/anon/pen/dPBRqp">Join</a></li> 
    </ul> 

    <div id="login"> 
     <ul> 
     <li>Log out</li> 
     <li>Log in</li> 
     </ul> 
    </div> 
    </div> 

Answer 1

Хотя ваш #login ДИВ технически внутри #navdiv, #navdiv имеет height множество, останавливая фон от расширения до покрытия #login, а также - #login находится внутри него структурно, но визуально он переполняет область #navdiv.

Итак, чтобы остановить этот бит, просто удалите height от #navdiv.

Чтобы выровнять логин справа, я бы рекомендовал сделать #login ulinline-block, который просто выровнен right. Вы теряете проблемы absolute и float, и легко реагировать.

#login { 
    text-align: right; 
} 
#login ul { 
    padding-right: 10px; 
    padding-left: 10px; 
    background-color: yellow; 
    display: inline-block; 
} 

Заметь, я также поставил цвет фона на ul, так как это более точным в #login области - вероятно, вы хотите изменить стиль некоторые еще так или иначе.

http://jsfiddle.net/daCrosby/5we2wxug/1/

Answer 2

Поместите этот код в CSS

.left_part { float:left;width:72%;} 
.right_part { float:right;width:28%;} 
.right_part ul { padding-left:0px;} 

и добавить в части тела

<div id="navdiv"> 
    <div class="left_part"> 
     <ul> 
       <li><a href="http://codepen.io/viggie/pen/ragPVG">Home</a></li> 
       <li><a href="www.yahoo.com">Members</a></li> 
       <li><a href="www.espn.com">Articles</a></li> 
       <li><a href="www.google.com">Videos</a></li> 
       <li><a href="http://codepen.io/anon/pen/dPBRqp">Join</a></li> 
     </ul> 
    </div> 
     <div class="right_part"> 
      <ul> 
        <li>Log out</li> 
        <li>Log in</li> 
      </ul> 
     </div> 
    </div> 

я просто дал вам нормальный идентификатор еа и теперь я надеюсь, что вы можете управлять своим собственным CSS с этим способом ... надеюсь, что это помогает ..

Обновлено

по тебе ... просто использовать Float на ул и входа DIV как логин div не будет работать с ul до тех пор, пока вы не будете использовать свойства float слева или справа. У них есть собственный css, и вы должны использовать float для этого ... может быть больше вариантов, но float поможет вам в вашем случае, если вы «т хотят больше DIV ..