Hello, I create a website on the blocks (I practice), I have a menu on the left, and the main content is on the right, but if the browser window size is increased, then the blocks are stretched, and one leaves to the left, the other to the right. Tell me how to make sure that both of them, while reducing the size, were forced towards the middle, and did not leave ... The location of the two blocks was fixed ...

4 answers 4

property position: fixed - By its action, this value is close to absolute, but unlike it, it binds to the left, top, right and bottom point indicated on the screen and does not change its position when scrolling a web page.

You want to get this:

<style type="text/css"> .main { margin: 0px auto; width: 935px; } .first { background-color: #0f6; float: left; width: 250px; position: fixed; } .second { background-color: #06f; margin: 50px 0 0 35px; float: left; width: 650px; overflow: scroll; height: 500px; position: fixed; } </style>

but why do you need Fixed blocks ??

  • Thank you. :)) The question is settled) - ivanforpw

“wrap” the elements in a wrapper , set the required width and use the margin: 0 auto , as stated in the answer above.

     margin: 0 auto;

    Below is a simple example. If you, of course, it meant. The image is centered during removal, approximation, ala vk.com xD

     <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <title>Документ без названия</title> <style type="text/css"> .main { margin: 0px auto; width: 600px; } .first { background-color: #0f6; float: left; width: 300px; } .second { background-color: #06f; float: left; width: 300px; } </style> </head> <body> <div class="main"> <div class="first"> first </div> <div class="second"> second </div> </div> </body> </html>
    • <style type = "text / css"> .main {margin: 0px auto; width: 100%; } .first {background-color: # 0f6; width: 250px; position: fixed; top: 15px; left: 15px; } .second {background-color: # 06f; width: 650px; height: 500px; position: fixed; top: 50px; right: 100px; overflow: scroll; } </ style> if it is, it does not align in the center. but when reducing the size of the window, stretched again. Is there anything from this? - ivanforpw

    Surely, you meant not “fixed” (fixed), but “absolutely positioned” (position: absolute;). The fixed location in this case has no logic (or just the menu, say, maybe "fixed"). Indeed, the blocks need to be wrapped in a separate container and set the margin property to it: 0 auto; (and do not forget to set the width different from 100%, otherwise nothing will change).