How can I limit the divs to fill the form in the right place?

.h1 { color: #868686; margin-left: 50px; } .a { max-width: 300px; width: 50%; color: green; margin-top: 50px; margin-left: 50px; font: 10pt Tahoma; } .underline { text-decoration: underline; } body { border-right: solid #b1cdff 28px; border-top: solid #b1cdff 28px; } .form { margin-bottom: 200px; width: 250px; padding: 10px; border: 2px solid red; margin-left: 581px; } 
 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1><span class="h1">Лабораторная работа №1</span></h1> <div class="a" <p>Главная :: <span class="underline">Задание на лабораторную работу</span></p> </div> <form> <div class="form"> <label for="login">Логин:</label> <input type='text' name='login'/> <br /> <label for="password">Пароль:</label> <input type='password' name='password' /> <br /> <input type='submit'value="Отослать данные"/> </div> </form> </body> </html>

enter image description here enter image description here

  • dispay: inline as far as I can remember - ArchDemon 2:51 pm

2 answers 2

Perhaps it will be a little better:

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { padding: 0; margin: 0; } .underline { text-decoration: underline; } .wrap { border-right: solid #b1cdff 28px; border-top: solid #b1cdff 28px; padding-left: 50px; } .row:before, .row:after { display: table; content: " "; } .row:after { clear: both; } .col-6 { width: 50%; float:left; } h1 { color: #868686; margin-left: 50px; } .a { max-width: 300px; width: 100%; color: green; margin-top: 50px; font: 10px Tahoma; } .form { margin-bottom: 200px; max-width: 250px; width: 100%; padding: 10px; border: 2px solid red; } input { width: 100%; } .form-row { margin-bottom: 10px; } 
 <div class="wrap"> <h1> Лабораторная работа №1 </h1> <div class="row"> <div class="col-6"> <div class="a"> <p> Главная :: <span class="underline"> Задание на лабораторную работу </span> </p> </div> </div> <div class="col-6"> <form> <div class="form"> <div class="form-row"> <label for="login">Логин:</label> <input type="text" name="login" id="login"/> </div> <div class="form-row"> <label for="password">Пароль:</label> <input type="password" name="password" id="password"/> </div> <input type="submit" value="Отправить данные"/> </div> </form> </div> </div> </div>

    I would use FLEX. It is simpler and clearer. Read here.
    https://wp-kama.ru/id_8045/flex-v-css.html