Jump to content
  • 0

Фиксированный блок в фиксированном блоке

vadimon

Asked by vadimon,

 Share

Question

vadimon Explorer

vadimon

Posted
Posted

Скорее всего хожу вокруг да около или просто туплю, но мне надо сделать два блока фиксированной ширины. Схематично это можно выразить так:

79c9bcca45b0t.jpg

Грубо говоря, у меня есть зеленый блок фиксированной ширины, а внего нужно запихнуть красный блок фиксированной ширины. Естественно, не получится запихнуть блок большей ширины в блок меньшей ширины, но вот как-то надо это сделать каким-то другим образом.... )))

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
Естественно, не получится запихнуть блок большей ширины в блок меньшей ширины

Кто тебе посмел сказать такую глупость?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	#wrap { 
		border: 1px solid #000; 
		background: green; 
		width: 400px; 
		margin: 0 auto;
	}
		#wrap div { 
			background: red; 
			margin: 100px -100px;
			height: 500px;
			border: 1px solid #000;
		}
</style>
</head>

<body>
	<div id="wrap">
		<div></div>
	</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
vadimon Explorer

vadimon

Posted
  • Author
Posted
Кто тебе посмел сказать такую глупость?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	#wrap { 
		border: 1px solid #000; 
		background: green; 
		width: 400px; 
		margin: 0 auto;
	}
		#wrap div { 
			background: red; 
			margin: 100px -100px;
			height: 500px;
			border: 1px solid #000;
		}
</style>
</head>

<body>
	<div id="wrap">
		<div></div>
	</div>
</body>
</html>

Твой код выше работает, вот только у себя его реализовать не получается (((. Вот мой код с фиксированным блоком "wrapper".

HTML:

<div id="wrapper">

	<div id="header">
		<div class="leftmenu">
			<p>Пятница, 15 сентября 2010 года</p>
		</div>
		<div class="logo"></div>
		<div class="rightmenu">
			<ul>
				<li><a href="" title="О компании">О компании</a></li>
				<li class="margin"><a href="" title="Прайс-лист">Прайс-лист</a></li>
				<li><a href="" title="Контакты">Контакты</a></li>
			</ul>
		</div>
		<div class="search">
			<form name="search" method="get" action="">
			<p class="searchtext">Поиск по сайту</p>
			<input type="submit" value="" class="searchbtn" />
			<div class="searchfield"><input type="text" value="" class="searchnone" /></div>
			</form>
		</div>
	</div><!-- #header-->

	<div id="content">
		<div id="slogan"></div>
	</div><!-- #content-->

</div><!-- #wrapper -->

<div id="footer">
</div><!-- #footer -->

Что мешает поместить всю конструкцию в position: relative и задавать положение уже относительно него?

Не пойдет. Сделав блок position: relative и наполняя его контентом он должен увеличиваться вместе с текстом, а так как под этим блоком у меня футер прижатый к низу, то футер также должен ползти вниз. Поэтому блок с текстом накладывается на футер.

Link to comment
Share on other sites
  • 0
vadimon Explorer

vadimon

Posted
  • Author
Posted
обнулять свойства после блоков надо

.clear {
 clear:both;
 display:block;
 height:0;
 overflow:hidden;
 visibility:hidden;
 width:0;
}

<div>Some Text</div>
<div class="clear"></div>
<div>Some Text</div>

Обнуление не помогает, текст все равно наезжает на футер.. ((

Link to comment
Share on other sites
  • 0
vadimon Explorer

vadimon

Posted
  • Author
Posted
Дружище, я тебе даже сделал рабочий вариант. Если твоих знаний не хватает, чтобы даже прикрутить его на сайт, то начни читать книги.

Дружище, в твоем профессионализме я уверен и ничего против него не имею, спасибо тебе за рабочий вариант. Прикрутил я его, уж на это ума хватает. Дело в том, что не совсем кроссбраузерно получается, в особенности в ie6 по ширине.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Дружище, в твоем профессионализме я уверен и ничего против него не имею, спасибо тебе за рабочий вариант. Прикрутил я его, уж на это ума хватает. Дело в том, что не совсем кроссбраузерно получается, в особенности в ie6 по ширине.

А я не кичился своими знаниями. Я говорил про то, что некоторые вообще не любят ничего читать, а хотят получать только рабочие варианты.

Для ИЕ6 поставь

		#wrap div { 

			position: relative;
		}

Link to comment
Share on other sites
  • 0
vadimon Explorer

vadimon

Posted
  • Author
Posted
А я не кичился своими знаниями. Я говорил про то, что некоторые вообще не любят ничего читать, а хотят получать только рабочие варианты.

Для ИЕ6 поставь

		#wrap div { 

			position: relative;
		}

Спасибо за совет. Но почему то работает с position: absolute;

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