Tell me how to properly place the two blocks that are surrounded by a red frame?
(without using frameworks)

enter image description here

Closed due to the fact that the essence of the question is not clear to the participants of the yolosora , AK ♦ , Jean-Claude , Enikeyschik , 0xdb January 23 at 11:57 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    Add your code - Rogatnev Nikita
  • Absolute positioning can be used - Bogdan Medvedev

2 answers 2

There are several ways to place blocks in a row; you can go the most usual way (in the old-fashioned way), an example was given to @IvanTokar. You can also use flexbox or grid , if you just use only the capabilities of HTML and CSS themselves.

An example using a grid :

 .grid-container { display: grid; grid-template-areas: '. grid-container-social . copyrights . . '; align-content: center; } .copyrights { grid-area: copyrights; } .grid-container > div { background-color:lightblue; text-align: center; padding: 15px 0; font-size: 14px; } .grid-container-social { display: grid; grid-area: grid-container-social; grid-template-columns: auto auto auto auto auto auto; align-content: center; } .div-socnetw { background-color: rgba(247, 247, 240, 0.8); text-align: center; padding:5px 0; font-size: 14px; border: 1px solid gray; } 
 <div class="grid-container"> <div class="empty"></div> <div class="grid-container-social"> <div class="div-socnetw">1</div> <div class="div-socnetw">2</div> <div class="div-socnetw">3</div> <div class="div-socnetw">4</div> <div class="div-socnetw">5</div> <div class="div-socnetw">6</div> </div> <div class="empty"></div> <div class="copyrights">2017. All Right Reserved</div> <div class="empty"></div> <div class="empty"></div> </div>

More details can be read at MDN.
In the form of a game you can deal with the grid on the Grid Garden

Example using flexbox :

 .footer { display: flex; flex-flow: row nowrap; background-color:lightblue; text-align: center; padding: 15px 0; font-size: 14px; } .flex-container-social { display: flex; flex-flow: row nowrap; margin: 0 20px 0 20px; } .div-socnetw { background-color: rgba(247, 247, 240, 0.8); text-align: center; padding:5px; font-size: 14px; border: 1px solid gray; } 
 <div class="footer"> <div class="flex-container-social"> <div class="div-socnetw">1</div> <div class="div-socnetw">2</div> <div class="div-socnetw">3</div> <div class="div-socnetw">4</div> <div class="div-socnetw">5</div> <div class="div-socnetw">6</div> </div> <div class="copyrights">2017. All Right Reserved</div> </div>

Read more about flexbox on MDN.
To work out the issue in the form of a game on the website Flexbox Froggy

I would recommend that you put more pressure on the flexbox which is up-to-date and supported by modern browsers, and most importantly, it is very easy to work with it, the grid practically tightened up. All major browsers already support it. But you need to sit with him.

  • one
    good, informative answer - Alexandr_TT
  1. You can use flexbox (here you can practice the Flexbox Playground )
  2. Or in the old manner:

 .container { padding: 10px; background: #eee; text-align: center; clear: both; } .left { float: left; } 
 <div class="container"> <div class="left">left content</div> <div>center content</div> </div>