По сути, я выкладываю веб-сайт и использую DIV, чтобы иметь верхний, левый столбец, правый столбец и нижний колонтитул. Я хочу, чтобы раздел содержимого веб-сайта расширялся до HTML / текста, вставленного в него, поэтому я использовал height: auto.
Я использую фоновые изображения для верхней части верхнего колонтитула, нижней части нижнего колонтитула и наполнителя 1px для основной части сайта.
Моя проблема в том, что все, что я пробовал, по существу устраняет среднее фоновое изображение, если я пытаюсь расположить правую и левую колонки справа, а не под ней.
Я уверен, что это, вероятно, что-то довольно легкое, но я был на нем с прошлой ночи, и я почти закончил, пытаясь понять это.
это допустимые XHTML и CSS (за исключением jQuery UI, который является CSS3, хотя это не должно иметь структурного значения).
Любые идеи или кто-то может указать мне учебник о том, как получить макет из двух столбцов с использованием фоновых изображений?
<body>
<div id="top">
THE TOP IMAGE GOES HERE IN CSS
</div>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
<div id="left-col">
</div>
<div id="right-col">
</div>
</div>
</div>
<div id="bottom">
THE BOTTOM IMAGE GOES HERE IN CSS
</div>
<div id="footer">
</div>
</body>
#wrapper {
margin: 0 auto;
width: 838px;
background-image:url('../images/wrapper_bg.gif');
background-repeat:repeat-y;
}
#header {
width: 818px;
color: #333;
padding: 10px;
height: 100px;
}
#navigation {
width: 838px;
}
#content {
width: 838px;
color: #333;
margin: 0px 0px 0px 0px;
/*min-height: 800px;*/
height: auto;
}
#footer {
width: 838px;
color: #333;
text-align: center;
}
#top{
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_top.gif');
}
#bottom{
clear: both;
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_bottom.gif');
}
#left-col{
margin-left: 20px;
width: 590px;
float:left;
height: auto;
}
#right-col{
width: 170px;
display: inline;
height: auto;
margin-right: 25px;
color: #777777;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
http://www.wholehealthconnect.org/home.php это веб-сайт.
Может ли кто-нибудь помочь мне заставить средний div расширяться до содержимого, а также располагать правый столбец рядом с левым столбцом и при этом иметь фоновое изображение позади них?