Jump to content
  • 0

Разместить 2 <div> фиксированой ширины по центру

volkoff

Asked by volkoff,

 Share

Question

volkoff Explorer

volkoff

Posted
Posted (edited)

В общем идея на картинке:

1d4c82360b67.png

Не самая сложная затея. пытаюсь сделать без шаблонов и застрял вот на этом.

Верхний div - ширина 1024

Меню + Главное 104 + 920 = 1024

Верхний очень красиво выровнялся с помочью margin:auto

3-й поставил около второго, приписав ко второму float: left

Вопрос: можно ли как то 2 и 3 отцентровать чтоб они вели себя как верхний, не прибегая к подгонке с помощью padding и прочих извращений ? ? ?

СпасибО !

ХТМЛ:

<body>
<div id="roof" align="center">1 крыша</div>
<div id="left">2 менюшка</div>
<div id="main">3 главное</div>
<br />
<br />
<div id="flour">4 низ</div>
</body>

CSS::

@charset "utf-8";
/* CSS Document */

body
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
}

#roof
{
	background-color:#FCF;
	border:solid  #666 2px;
	width:1024px;
	margin:auto
}

#left
{
	float:left;
	padding: 0px 5px 0px 5px;
	width: 104px;
	border: solid #666 1px;
	margin:auto;
}

#main
{
	width:920px;
	border: solid #666 1px;
	text-align:right;	
}

Edited by volkoff
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
volkoff Explorer

volkoff

Posted
  • Author
Posted (edited)
вообще-то в данном случае правильнее body отцентровать, и не надо никаких костылей вроде дополнительных обёрток.

эмм......

у меня <div> шириной 1024, а монитор 1680.... При полноэкраном просмтре <body> как себя вести будет ? Какую он ширину примет ? Самого широкого элемента ?

или имеется в виду задать сначала у <body> тоже ширину 1024 ? Тогда зачем центровать ?

Edited by volkoff
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

совершенно верно.

body {
width: 1000px; /* не надо делать 1024, оставим чуток места для вертикального скроллинга */
margin: 0 auto;
}

Делаю так всегда, ещё ни разу такой подход не подвёл.

…зачем центровать ?

затем, чтобы весь документ у вас был по центру.

Тогда совершенно не нужно заботиться о центровке крыши и колонок.

Link to comment
Share on other sites
  • 0
volkoff Explorer

volkoff

Posted
  • Author
Posted

Вот это да !

Сколько решений одной и той же задачи !

Еще раз спасибо !

<————————— оффтоп ————————-->

Кстати, не знаете, что за шрифт, когда пишешь сообщение ?

fb84cd429719.png

<—————————- оффтоп ————————->

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
Posted 
body {
width: 1000px; /* не надо делать 1024, оставим чуток места для вертикального скроллинга */
margin: 0 auto;
}

Делаю так всегда, ещё ни разу такой подход не подвёл.

Это изврат. Элемент <body> лучше не трогать. Если понадобиться на сайт что-то приделать на javascript и в скрипте будет измеряться размер окна документа, то это приведёт к глюкам при выполнении javascript-эффектов.

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted
Это изврат. Элемент <body> лучше не трогать. Если понадобиться на сайт что-то приделать на javascript и в скрипте будет измеряться размер окна документа, то это приведёт к глюкам при выполнении javascript-эффектов.

Ну в заведмо простых случаях (какая-нибудь статическая заглушка, например) — можно.

Но спокойнее себя чувствуешь, когда для таких целей добавена отдельная обертка. Довольно мало есть ситуаций, когда действительно необходимо экономить байты и милисекунды.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Проблемы могут возникнуть при прикручивании сайта на какую нибудь CMS, могут появиться непонятные отступы и прочие неизвестные проблемы. Поэтому я почти отказался от body { margin: 0 auto;}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept