@danilr

Контент вылезает за рамки родителя, непонятный сдвиг из-за php include – почему?

index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style_float.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="js/equalHeight.js" type="text/javascript"></script>
<title>плавающий</title>
</head>
<body>
	<div id="wrapper">
    <? include('blocks/header.php'); ?> 
    <? include('blocks/sidebarl.php'); ?>
		<div id="sidebarr">suere non massa volutpat, ultricies venenatis massa. Nullam elit purus, commodo in sodales id, consectetur sed sem. Donec in porttitor neque. Mauris tristique vel libero eu mollis. Morbi aliquet eget nisi et venenatis. Curabitur vitae ante volutpat, sagittis arcu molestie, pellentesque elit. Nam eget est fermentum ipsum placerat ullamcorper at a lorem.</div>
		<div id="content">Использующими латинский алфавит, могут возникнуть. Веб-дизайнерами для вставки на сайтах и слова, получив текст-рыбу. Различных языках те или иные буквы встречаются с языками использующими. Возникают некоторые вопросы, связанные с языками, использующими латинский алфавит, могут возникнуть небольшие. Генераторы, создающие собственные варианты текста на основе. Разной частотой, имеется разница. Отношения к обитателям водоемов использующими латинский алфавит. Именно из его применили. 
Сыграет на интернет-страницы и зла средневековый. Шрифтов, абзацев, отступов и слова получив. Применили в качестве рыбы текст этот. Вывод, что все же лучше использовать в длине наиболее распространенных. Своим появлением lorem его трактата о пределах добра. Считается, что все же лучше использовать. Того, есть специальные генераторы, создающие собственные варианты текста. Название, не имеет никакого отношения. Шрифтов, абзацев, отступов и по сей день то и проектах, ориентированных. 
Оригинального трактата, благодаря чему появляется. Для вставки на интернет-страницы и. Получить более длинный неповторяющийся набор. Ему нести совсем необязательно демонстрационная, то и на основе оригинального трактата. Длине наиболее распространенных слов наиболее распространенных слов. Рыбы текст этот, несмотря на основе оригинального трактата благодаря. Качестве рыбы текст этот, несмотря. Вида контента, просмотра шрифтов, абзацев, отступов и по. Возникают некоторые вопросы, связанные с использованием lorem ipsum обязан древнеримскому. 
Контент – написание символов на. Наиболее распространенных слов кириллический контент – написание. Сыграет на название, не имеет никакого отношения к обитателям водоемов набор слов.. Абзацев, отступов и зла средневековый. Сыграет на сайтах и даже с разной частотой имеется. Вида контента, просмотра шрифтов, абзацев, отступов и проектах, ориентированных. Наиболее распространенных слов некоторые вопросы, связанные с языками. То и даже с разной частотой, имеется разница в книгопечатании еще. 
К обитателям водоемов пределах добра. Этот, несмотря на название, не имеет никакого отношения к обитателям. Слова, получив текст-рыбу, широко используемый и зла средневековый. Сей день использованием lorem ipsum обязан древнеримскому. В книгопечатании еще в xvi веке ведь именно из его трактата. Который планируется использовать при запуске проекта считается, что такое текст-рыба. Веб-разработчик знает, что такое текст-рыба. Латыни и смысловую нагрузку ему нести совсем необязательно впервые его применили. 
</div>
		<div class="clear"></div>
		<div id="footer">ctetur adipiscing elit. Phasellus id arcu eu ex venenatis congue. Sed fringilla nisl ipsum, et vulputate enim tempus non. Nullam varius sollicitudin nisi, ac ultrices sapien. Vestibulum sed sagittis magna. Proin blandit dapibus libero id fringilla. Donec congue vitae dolor vulputate dapibus. Suspendisse nunc magna, posuere non massa volutpat, ultricies venenatis massa. Nullam elit purus, commodo in sodales i</div>
	</div>
</body>
</html>

header.php
<div id="header">elit tellus vel nisl. Aenean malesuada eros augue, sit amet efficitur eros hendrerit sit amet. Nam lacinia bibendum semper. Suspendisse metus lorem, malesuada sed dolor sit amet, fermentum vehicula dolor. Maecenas dignissim leo id metus luctus molestie. Maecenas sagittis orci a justo sollicitudin auctor. Morbi est elit, convallis at pretium vel, aliquet ut nulla. Maecenas quam diam, dignissim et condimentum ut, dic</div>

style.css
#wrapper{
width:800px;
outline:1px solid #cccccc;
margin: 0 auto;
padding: 10px;
}
#header{
height:77px;
background-color: #f8ac18;
margin-bottom: 12px;
}
#sidebarl{
background-color: #ebebeb;
margin-bottom: 12px;
width:150px;
float:left;
}
#sidebarr{
background-color: #ebebeb;
margin-bottom: 12px;
width:150px;
float:right;
}
#content{
background-color: #c5161d;
margin-bottom: 12px;
height:1600px;
width:480px;
margin-left:160px;
margin-right: 160px;
}
#footer{
height:77px;
background-color: #B68AFC;
margin-bottom: 12px;
}
.clear{
clear:  both;
}


После разделения страницы на сайте через php include content сдвинулся в низ пикселей на 20, непонятно почему. Это первая проблема. Вторая - это то, что содержимое контента выходит за рамки блока content , а мне нужно чтобы он растягивался до тех пор, пока не закончится содержимое. Подскажите как исправить
  • Вопрос задан
  • 920 просмотров
Решения вопроса 1
UTF-8 with BOM?
кодировка файлов какая?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Tavion
@Tavion
front-end developer
На счёт блока контент: он не будет у вас никак растягиваться, потому что вы ему ширину и высоту задали. Чтобы блок тянулся у него должен быть width: auto;

На счёт сдвига контента вниз: у вас не весь код тут представлен (сайдбар в инклюде забыли).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы