Два сайдбара в HTML

Question

Хочу сделать два сайдбара на одной высоте. Но они на разной висоте. Подскажите как сделать ровно. Мой код:

.button{
    color:#B0B0B0;
    background-color:#181818;
    padding:15px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right:5px;
    border:3px solid #404040;
    border-radius:30px;
    box-shadow:1.5px 3px 7px #404040;
    text-align:center;
    transform:scale(1);
    transition:0.25s all;
    width:200px;
    float:center;
}

    border:0px;
    background-color:#181818;

}.button:hover{

    box-shadow:3px 6px 14px #505050;
    transform:scale(1.01);
    transition:0.5s all;


}
.rt{
    float: right;
}
.cont{
    color:#B0B0B0;
    background-color:#181818;
    padding:15px;
    margin:15px;
    border:3px solid #404040;
    border-radius:30px;
    box-shadow:1.5px 3px 7px #404040;
    text-align:center;
    width:250px;
}

<html>
    <head>
        <meta charset="UTF-8">
        <title>FS</title>
        <link rel="icon" href="test.png">
        <link href="test.css" rel="stylesheet" type="text/css"/>
    </head>


    <body>
    <div class="cont">
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>

    </div>
    <div class="cont rt">
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>
        <div class="button lt">Hello world!</div>

    </div>
    </body>

</html>

Answer 1

Класс .rt установите на первый блок, если нужны отступы, добавте обёртку

.button{
    color:#B0B0B0;
    background-color:#181818;
    padding:15px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right:5px;
    border:3px solid #404040;
    border-radius:30px;
    box-shadow:1.5px 3px 7px #404040;
    text-align:center;
    transform:scale(1);
    transition:0.25s all;
    width:200px;
    float:center;
}

    border:0px;
    background-color:#181818;

}.button:hover{

    box-shadow:3px 6px 14px #505050;
    transform:scale(1.01);
    transition:0.5s all;


}
.rt{
    float: right;
}
.container {
  margin: 15px;
}
.cont{
    color:#B0B0B0;
    background-color:#181818;
    padding:15px;
    border:3px solid #404040;
    border-radius:30px;
    box-shadow:1.5px 3px 7px #404040;
    text-align:center;
    width:250px;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>FS</title>
  <link rel="icon" href="test.png">
  <link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class='container'>
    <div class="cont rt">
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
    </div>
    <div class="cont">
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
      <div class="button lt">Hello world!</div>
    </div>
  </div>
</body>

</html>

Answer 2

Установите для класса cont свойство

display: inline-block;

Тег <div> по-умолчанию имеет свойство display: block;, которое вынуждает браузер каждый новый элемент размещать с новой строки, по отношению к предыдущему элементу с тем же свойством. А значение inline-block соответствует элементу обтекаемому другими, это стандартное поведение тега <img>, например.

БЛОГ НА HUSL

Два сайдбара в HTML

Ответы (2 шт):