There is an html code:

<header> <div class="block"></div> <div class="container"> ... </div> <header>

enter image description here

Give me a hint how to make up such an arrangement of blocks. That at a distance, .block always pressed to the container. I only get solution curves through float and position: absolute, but I can't think of a normal one ...

  • Explain what is ΠΏΡ€ΠΈ ΠΎΡ‚Π΄Π°Π»Π΅Π½ΠΈΠΈ всСгда приТимался . And add your solutions to the question. So it will become clearer than you can help. - Gleb Kemarsky pm

2 answers 2

use the css margin-left property:

 .block { height:100px; width:100px; background-color: red; float:left; /* ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ Π½Π°Π΄ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ ΠΈ ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ Π²Π»Π΅Π²ΠΎ */ } .container { height:200px; width:200px; background-color:yellow; margin-left:100px; /* Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ .block */ } 
 <div class="block"></div> <div class="container"></div>

Another way. Place the Container in the center and attach a block to the right.

 .container { height:200px; width:200px; background-color:yellow; margin: auto; position:relative; } .block { height:100px; width:100px; background-color: red; position:absolute; left:-100px; } 
 <div class="container"> <div class="block">мСню</div> тСкст </div>

  • Thank you, that's just another condition that I did not specify. The container already has a margin: 0 auto; And it is located exactly in the center of the page - Bim Bam
  • one
    then you need to wrap both blocks in another block and move the margin:0 auto; property margin:0 auto; into it, so you reposition both blocks in the center. - perfect
  • @BimBam added another possible option with the Container in the center, see the updated answer - perfect

 section { display: table; } section > * { padding: .25em .5em; } .block { height: 4em; background: silver; } .container { display: table-cell; width: 100%; height: 8em; background: antiquewhite; } 
 <section> <div class="block">block</div> <div class="container">container</div> <section>