Question 44547 in Html Question posted in
Some basic documentation can be found here.

How to place two blocks in the center of the page dividing it in half between them? – Html

I have a central part of the page.

I want it to be like in the picture. However, I can’t set 2 blocks so that they divide the page in half between them.
In place of this, the text cuts off the image.
enter image description here

.wrapper {
  display: inline-flex;
  flex: 1;
}

.text__main {
  padding: 10px;
  min-width: 10%;
}

.img__central {
  height: 800px;
  width: auto;
}

img {
  width: 100%;
  /* Ширина изображений */
  height: 100%;
  /* Высота изображении */
  object-fit: cover;
  /* Вписываем фотографию в область */
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}
<div>
  <div class="wrapper">
    <div class="text__main">
      <h1>Умное образование</h1>
      <span>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non dolorem, autem reiciendis quibusdam mollitia consequatur similique sapiente quia nisi eos optio voluptatibus rem ut voluptates quaerat ad eaque in labore?
            </span>
      <button><a href="">НАчать обучение</a></button>
    </div>
    <div class="img__central ">
      <img src="/assets/img/mainslider/02.jpg" alt="">
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    You can use flex-grow which will give two elements with the same value the same space. There is shortcut for flex-grow: flex: <flex-grow> <flex-shrink> <flex-basis>;
    https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

    .text__main {
  padding: 10px;
  min-width: 10%;
  flex: 1;
}

.img__central {
  height: 800px;
  width: auto;
  flex: 1;
}
    Login or Signup to reply.
  2. 0

    Use a flexbox. Adjust margins/padding as it fits you.

    .wrapper {
  display: flex;
  justify-content: space-between;
}

.text__main {
  padding: 10px;
  width: 50%;
}


.img__central {
  width: 50%;
}

img {
  width: 100%;
  /* Ширина изображений */
  height: 100%;
  /* Высота изображении */
  object-fit: cover;
  /* Вписываем фотографию в область */
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
  width: 50;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}
    <div>
  <div class="wrapper">
    <div class="text__main">
      <h1>Умное образование</h1>
      <span>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non dolorem, autem reiciendis quibusdam mollitia consequatur similique sapiente quia nisi eos optio voluptatibus rem ut voluptates quaerat ad eaque in labore?
      </span>
      <button><a href="">НАчать обучение</a></button>
    </div>
    <div class="img__central ">
      <img src="/assets/img/mainslider/02.jpg" alt="">
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Bootstrap framework is used.

    In the below example If you want that responsiveness that if width of screen is below 576px the column width will be of 100% and if screen width is greater the 576px the row will have two columns 50%(1st column) and %50(2nd column) the use :

    div class="col-sm-12 col-md-6"

    .text__main {
  padding: 10px;
  min-width: 10%;
}

.img__central {
  height: 800px;
  width: auto;
}

img {
  width: 100%;
  /* Ширина изображений */
  height: 100%;
  /* Высота изображении */
  object-fit: cover;
  /* Вписываем фотографию в область */
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <h2>HELLO WORLD</h2>
    <div class="col-sm-6">
      <span>
        Install Bootstrap’s source Sass and JavaScript files via npm,                 RubyGems, Composer, or Meteor. Package managed installs don’t include         documentation or our full build scripts. You can also use our npm             template repo to quickly generate a Bootstrap project via npm.
      </span>
    </div>
    <div class="col-sm-6">
      <img/>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search