Позиция справа без поплавка

Question

Привет, ребята (и gals) Я просто пытаюсь выровнять форму справа от моего навигатора, сейчас я использую float, но проблема в том, что размер окна становится слишком маленьким для это все, чтобы поместиться на одну строку, он выпрыгивает за пределы навигационной панели, вместо навигационной панели, следующей за ней, поэтому мой вопрос:

Как можно выровнять по правому краю без поплавка или абсолютного позиционирования. Это мой код прямо сейчас:

.navbar .form { 
    float: right; 
    display: inline; 
    line-height: 43px; 
} 

Кроме того, обивка на моем hero-body классе вызывает правую сторону границы, чтобы вытолкнуть мимо контейнера, как я могу это исправить?

.hero-body { 
    background: -webkit-linear-gradient(left, #FFFFFF 0, #FFFFFF 85%, #EEEEEE 100%); 
    border-radius: 5px; 
    box-shadow: 1px 1px 5px #ccc; 
    width: 100%; 
} 

Демо: http://codepen.io/anon/pen/HlhEj

Answer 1

Вы можете исправить это, применив clearfix на .navbar.

Добавить это

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 

Добавьте .clearfix класс:

<div class="navbar clearfix"> 

навигационной панели теперь будет расширяться по вертикали, чтобы компенсировать отсутствие горизонтального пространства.