2 форма бок о бок плавать

Question

Итак, у меня есть 2 формы, зарегистрируйтесь и войдите на эту же страницу. Теперь я устраиваю свои формы/макет и хочу, чтобы обе формы были красивыми бок о бок.

Теперь я использую это:

HTML:

<div class="links"> 
    <h2>Register</h2> 
    <?php include ("register.php");?> 
</div> 

<div class="rechts"> 
    <h2>Login</h2> 
    <?php include ("login.php");?> 
</div> 

<div class="clearfix"></div> 

CSS:

.links{ 
    float: left; 
    width:50% 
} 
.rechts{ 
    float: right; 
    width: 50%; 
} 

Это работает, но я хочу, что правая форма является липким вправо боковая сторона. Как вы можете видеть на моем изображении, у него много свободного места. когда я помещаю text-align: right; там, мой текст только придерживается формы. но форма не хочет отходить в сторону.

Изображение:

Answer 1

Вы можете просто установить определенную ширину для правильной формы руки, например, так:

.rechts{ 
    float: right; 
    width: 300px; 
} 

Вот скрипку:

http://jsfiddle.net/CcZXk/

В качестве альтернативы, он может работать правильно, если вы полностью удалите width:50%; на правой руке. Однако это будет зависеть от содержания этого div. (Плавающие элементы работают немного как встроенные элементы в том, что они стараются быть как можно меньше, но все еще содержат все их содержимое. Другими словами, если у вас длинная строка текста или длинное изображение или поле ввода внутри div , удаление width:50%; не будет работать, так как DIV будет слишком широким и обернуть на следующую строку.)

Answer 2

на самом деле он работает правильно, потому что он имеет 50% от ширины.

изменить его пикселы/Авто

.links{ 
    width: auto; 
    float: left; 
} 
.rechts{ 
    width: auto; 
    float: right; 
} 

Проверить это JSFiddle

Answer 3

.rechts{ 
width:auto; 
margin-right:0; 
float:right; 
overflow:hidden; 
} 

ИЛИ .....

<div class="rechts"> 
    <div class="inner"> 
    <h2>Login</h2> 
    <?php include ("login.php");?> 
    </div> 
</div> 

.rechts{ 
float: right; 
width: 50%; 
} 
.inner{ 
float: right; 
width:auto; 
margin-right:0; 
} 

Answer 4

Вместо использования float директивы вы можете также использование display. Вы можете легко добавить медиа-запросы в таблицу стилей и изменить ее на display: block, чтобы избежать горизонтальной прокрутки на меньших размерах экрана.

См http://jsfiddle.net/QnDte/

/* CSS */ 
.register, 
.login { 
    display: table-cell; 
} 
.register_and_login { 
    display: table; 
    margin: auto; 
} 

<!-- HTML --> 
<div class="register_and_login"> 
    <div class="register"> 
     <h2>Register</h2> 
     <?php include ("register.php");?> 
    </div> 
    <div class="login"> 
     <h2>Login</h2> 
     <?php include ("login.php");?> 
    </div> 
</div> 

Answer 5

<div class="mainblock"> 
<div class="links"> 
    <h2>Register</h2> 
    <?php include ("register.php");?> 
</div> 

<div class="rechts"> 
    <h2>Login</h2> 
    <?php include ("login.php");?> 
</div> 
</div> 
<div class="clearfix"></div> 

CSS:

.mylinks{ 
    float: left; 
    width:50%; 
} 
.rechts{ 
    float: left; 
    width: 50%; 
} 
.mainblock 
{ 
    width: 1000px; 
    margin:0px auto; 
}