Home/ Questions/Q 6676511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:59:51+00:00

I have this markup: <body> <div class=prevBtn> <a> < </a> </div> <div id=player> some

  • 0

I have this markup:

<body>
 <div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>

I’m trying to get this layout:

enter image description here
Note: The previos and the next button are close to the #player

And i’m trying like this:

            .nextBtn{
                 float:left;
                 width:15%;
                 margin-top:180px;
            }
            .nextBtn a{
                float:right;
            }
            .player{
               float:left;
             width:70%;
                 margin-top:100px;
            }
            .prevBtn{
                float:right;
                 width:15%;
                 margin-top:180px;

            }
            .rightBtn a{
                float:left;

            }

the problem is that it doesn’t stay like the layout if the resolution is too big or too small,

How can I achieve this for any resolution?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    surround it with a div with 770px + the left and right buttons width (change their widths from percent to a fixed width).

    This will guarantee all are together.

    Also use a overflow: hidden or a div with clear:both at the end, this will make sure everything is in place.

    • 0