0

Здравствуйте, создаю сайт на блоках(практикую), у меня есть меню слева, и главное содержание справа, но если размер окна браузера увеличивать, то блоки растягиваются, и уезжают один влево, другой вправо. Подскажите, как сделать так, чтобы они оба при уменьшении размера стягивались к середине, а не разъезжались... Расположение двух блоков фиксированное...

3

4 ответа 4

3

"обвернуть" элементы в wrapper, ему задать необходимую ширину и воспользоваться margin: 0 auto, как было сказано в ответе выше.

2
margin: 0 auto;

Ниже простой пример. Если вы, конечно, это имели ввиду. Изображение центрируется при удалении, приближении, аля 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>
1
  • <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> если будет так, то по центру не выравнивает. но при уменьшении размера окна, растягивается снова. есть ли что-то от этого?
    – ivanforpw
    11 ноя 2012 в 15:58
2

Наверняка, вы имели в виду не "фиксированные" (fixed), а "абсолютно позиционированные" (position: absolute;). Фиксированное расположение в данном случае не имеет никакой логики (или только меню, скажем, может быть "fixed"). Действительно, блоки нужно обернуть в отдельный контейнер и задать ему свойство margin: 0 auto; (и не забыть задать ширину отличную от 100%, иначе ничего не изменится).

1

свойство position: fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Вы хотите получить это:

<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>

но для чего вам блоки Fixed??

1
  • Спасибо.:)) Вопрос исчерпан)
    – ivanforpw
    11 ноя 2012 в 17:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.