Левый DIV фикс.ширины, правый - резина. Как сделать?

Xandr Morris · February 10, 2009

Задача следующая. Надо сделать два слоя рядом. В левом DIV'е будет меню, в правом - весь контент.

Левый DIV должен быть фиксированной ширины: 224px, а правый - растягиваться до конца экрана по ширине. При этом чтоб не было горизонтальной полосы прокрутки.

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

Вот скриншоты:

1024x768

1280x1024

Делал я следующим образом:

<html>
<head>
<title>test</title>
<style type="text/css">

div.xm_body_container {
  float:left;
  left:2%;
  top:59px;
  width:96%;
  overflow:hidden;
}

div.xm_col {
  float:left;
  left:0px;
  border-left:224px solid transparent;
  width:100%;
}

div.xm_column {
  float:left;
  left:0px;
  border-left:224px solid transparent;
  width:100%;
}

div.xm_sidebar {
  float:left;
  margin-left:-224px;
  width:224px;
}

div.xm_body {
  width:auto;
  float:left;
}

div.xm_content_container {
  float:left;
  left:2%;
  margin-top:0px;
  width:98%;
}

div.xm_clear {
  clear:both;
}

</style>
<body>

<div id="xm_body_container" class="xm_body_container">
  <div id="xm_col" class="xm_col">

	<div id="xm_sidebar" class="xm_sidebar">
	  <!-- SIDEBAR HERE -->
	</div>

	<div id="xm_body" class="xm_body">
	  <div id="xm_content_container" class="xm_content_container">
		<!-- CONTENT HERE -->
	  </div>
	</div>

  </div>

  <div id="xm_clear" class="xm_clear"></div>
</div>

</body>
</html>

Знаю, что код запутанный. Тут приходится еще учитывать особенности CMS Drupal и подгонять под браузеры. Данный вариант я тестил в "FF 3".

Просто никак не могу понять, ГДЕ тут ошибка. Уже второй день ковыряюсь - уже мозг кипит.

Bondarov · February 11, 2009

Перед тем как постить картинки - НАДО ИХ ОПТИМИЗИРОВАТЬ!

То что ты ищешь тут - http://www.htmlbook.ru/content/?id=102

Searcher · February 11, 2009

про doctype не забывайте

Xandr Morris · February 11, 2009

Doctype есть. С этим всё в порядке. Вопрос был лишь с позиционированием.

За картинки - извините. Провтыкал момент. Статейку почитал - сейчас попробую сделать. Если не получится - скажу.

Sign In

Левый DIV фикс.ширины, правый - резина. Как сделать?

Question

Xandr Morris

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Bondarov

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Xandr Morris

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information