• Первый раз делаю верстку сайта. Как исправить данную ситуацию, так, чтобы "icebeaker_main_block" был справа?

    @Medvejonok86
    1-й вариант: использовать float.
    .header_txt__block {
        width: 634px;
        float: left;
        text-align: left;
    }
    .icebeaker_main_block {
        background: rgba(51, 51, 51, 0.30);
        float: right;
    }

    2-й вариант: использовать flex.
    Оборачиваем оба блока в div с классом "wrapper":
    <div class="wrapper">
      <div class="header_txt__block">...</div>
      <div class="icebeaker_main_block">...</div>
    </div>

    и редактируем css:
    .wrapper {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
    }
    .header_txt__block {
        width: 634px;
        text-align: left;
    }
    .icebeaker_main_block {
        background: rgba(51, 51, 51, 0.30);
    }

    3-й способ: использовать grid.
    Оборачиваем оба блока в div с классом "wrapper":
    <div class="wrapper">
      <div class="header_txt__block">...</div>
      <div class="icebeaker_main_block">...</div>
    </div>

    и редактируем css:
    .wrapper {
        display: grid;
        grid-template-areas: "left_block right_block";
    }
    .header_txt__block {
        width: 634px;
        text-align: left;
        grid-area: left_block;
    }
    .icebeaker_main_block {
        background: rgba(51, 51, 51, 0.30);
        grid-area: right_block;
    }
    Ответ написан
    1 комментарий