Faced a problem with layout.

It is necessary to fix the <div class="andrew_top_nav_absolute"> , so that when changing the width of the browser, it remains in place <div class="andrew_top_nav_absolute"> to play with left: right: did not work.

Tell me which way to go?

 .andrew_top_nav { height: 35px; width: 100%; margin: 0 auto; position: relative; background: red; } .andrew_top_nav_absolute { position: absolute; height: 35px; width: 1356px; background: green; } 
 <div class="andrew_top_nav"> <div class="andrew_top_nav_absolute"> <a href="">Link1</a> <a href="">Link2</a> <a href="">Link3</a> </div> </div>

  • 2
    remained in what place? where exactly do you want to fix it? - humster_spb
  • position: fixed; - Dmitriy
  • if you apply fixed then scrolling downwards will block the block. I need the element to not change its position when changing the width of the browser does not float: left, right - Andrew
  • @humster_spb fix horizontally in the center of the page so that when changing the width of the browser window the position does not change .... - Andrew

2 answers 2

Solved the problem this way:

  .andrew_top_nav { height: 35px; width: 1638px; margin:0 auto; position: relative; } .andrew_top_nav_absolute { height: 35px; width:1356px; border-bottom: 1px solid #c6c6c6; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    when fixing an absolute, you need to specify one of the parameters top, left, right, bottom

    for example, if I want to fix a block at the top of the screen on the left, I need to specify: top: 0; left: 0;

    if I want to fix 20 pixels left of the right side of the screen: right: 20px;

    play and understand how it works