Резиновый слой по центру окна броузера

abused · December 19, 2011

Всем привет

Чтобы было понятнее, приведу пример: http://htmlbook.ru/layout/sloy-po-tsentru-veb-stranitsy

Нужно сделать слой по центру окна броузера, но не фиксированной ширины, а резиновое! Внутри окна будут выводиться данные в несколько колонок, поэтому важно чтобы ширина окна подстраивалась под выводимые данные. По центру-то я его размещаю без проблем (правда, не тем способом, который описан в примере):

div#main-window{
    width: 500px; /* если убрать ширину, то получается говно */
    margin-left: auto;
    margin-right: auto;
}

Но вот ширина 500px смущает. Если убрать width, то слой распахивается на всю ширину окна, что не есть гуд. Можно конечно использовать max-width, но это тоже фигня, потому как количество колонок может быть разным, и данные могут не поместиться в окно.

Без таблиц реально такое сделать?

Спасибо

(а сам пишу и думаю, что напрочь забыл табличную верстку и то, вообще можно ли сделать такое при помощи таблиц, вроде можно)

Softlink · December 20, 2011

Как-то не совсем понятно. Вам надо чтобы слой тянулся во всю ширину колонок, но зафиксировать по центру. Обычно макеты с отцентрированным контентом встречаются именно с фикс размерами. По большому счету вам надо сделать отступы с флангов. Используйте вместо margin: 0 auto margin:0px 50px; или паддинг у родителей и ширину указывать не надо будет.

dostel1 · December 20, 2011

abused

поэтому важно чтобы ширина подстраивалась под выводимые данные.

Может так?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
*{padding:0;margin:0}
body{text-align:center}
div{display:inline-block;
height:50px;
background-color:red;
}
</style>
</head>

<body>
<div>
место контента
</div>
</body>
</html>

но способ Softlink лучше

Edited December 20, 2011 by dostel1

abused · December 20, 2011

Как-то не совсем понятно

Прошу пардона, видимо не удалось объяснить детально и сразу.

Прежде всего оговорюсь что это не сайт, а веб-приложение (монитор состояния промышленных объектов). В родительский блок выводятся данные, объем которых влияет на ширину окна (надо чтобы все помещалось — отсюда и требование к "резиновости"). При этом родительский блок надо разместить по центру броузера (достаточно выравнивания по горизонтали).

Такая "обертка" решает проблему:

<table id="main-window"><tr><td id="data-cell">
<!-- тут, собсно все и выводится -->
</td></tr></table>

#main-window{
    margin: 60px auto;
}

...но головоломка в том, можно ли сделать то же самое БЕЗ таблицы-обертки?

Great Rash · December 20, 2011

При этом родительский блок надо разместить по центру броузера (достаточно выравнивания по горизонтали).

Вам все равно не удается объяснить то, что вы хотите.

1) Какой ширины должен быть "резиновый" блок?

2) У него должны быть отступы от краев окна, какие: резиновые или фиксированные?

3) Есть ли у такого блока блоки-соседи? Под ним или над ним что-то есть или он единственный на странице?

4) Что-то кроме этого блока на странице вообще есть?

hedgehog · December 20, 2011

в качестве обертки можно использовать div вместо body в варианте с inline-block. либо попробовать div с display-table

dostel1 · December 20, 2011

в качестве обертки можно использовать div вместо body в варианте с inline-block. либо попробовать div с display-table

--приведи пример display-table плиз ,у меня не получается

Edited December 20, 2011 by dostel1

abused · December 20, 2011

dostel1 спасибо, такой способ вроде подходит.

hedgehog · December 20, 2011

приведи пример display-table плиз ,у меня не получается

http://jsfiddle.net/AvfhR/

думается мне, что это костыль

Собственно, если размер блока подстраивается под размер содержимого, то margin'ом его не выровнять, насколько я знаю (т.е. инлайновые блоки или блоки с float). Кто скажет, чем плох вариант с text-align: center для обертки и float: left или display: inline-block для выравниваемого блока?

Gaspode · December 20, 2011

Кто скажет, чем плох вариант с text-align: center для обертки и float: left или display: inline-block для выравниваемого блока?

Ничем. Не считая того факта, что на блок с float: left это не подействует.

Sign In

Резиновый слой по центру окна броузера

Question

abused

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

abused

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

abused

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information