У меня есть проблема с обработкой изображений на div.У меня есть три разных изображения, одно наверху страницы, внизу страницы и среднее изображение, которое должно повторяться на его "у".Все уже организовано.Моя проблема заключается в том, что я хотел, чтобы высота нижнего изображения соответствовала содержанию в нем (содержимое находится на строчке div с плавающей точкой слева - это должно быть содержимое из двух столбцов) Но нижнее изображение не будет следовать, если я добавлюсодержимое на float осталось, а когда не в этом состоянии, все в порядке.Эта проблема уже сводит меня с ума.Может ли кто-нибудь здесь помочь?
Большое спасибо!
Вот структура кода ...
<div id="topBackground">
<div id="bottomBackground">
<div id="page">
<div id="content">
<div id="main">
<div id="mainTopBg">
<div id="mainContent">
<div id="leftCol">
</div>
<div id="sidebar">
</div>
</div>
</div>
</div>
</div>
<!--/content -->
</div>
<!--/page -->
</div>
</div>
CSS К ним относятся:
#page {
margin:0 auto 0 auto;
width: 900px
}
#content {
padding-top: 140px;
}
#topBackground {
background:url(images/wrap_bgTopUtensils.png) top center no-repeat;
width:100%;
}
#bottomBackground {
background:url(images/wrap_bgBottomUtensils.png) bottom center no-repeat;
width:100%;
}
#main {
background:url(images/main_bgRepeat.gif) repeat-y;
width:900px;
}
#mainTopBg {
background:url(images/main_bgTop.gif) top no-repeat;
}
#mainContent {
background:url(images/main_bgBottom.png) bottom no-repeat;
min-height:935px;
width:840px;
padding:50px 30px;
}
#leftCol {
display:inline;
float:left;
}
#leftCol p {
margin-bottom:10px;
margin-top:10px;
line-height:20px;
}
#leftCol h2 {
margin-bottom:10px;
margin-top:10px;
font-size:35px;
}
#sidebar {
display:inline;
float:right;
width:340px;
}