Tzn jeśli w jednym z div-ów znajdzie się więcej tekstu niż "min-height" to w drugim wystąpi dopełnienie.
Div "stopka" powinien być wyświetlany zawsze na samym dole strony i mieć stałą odległość od diva "treść_strony"
Jeśli dopełnienie zostanie zrobione na poziomie kontenerów to może wystąpić sytuacja, że "stopka" znajdzie się w sporej odległości od dolnej krawędzi.
Czy jest to w ogóle możliwe?
Być może powinienem zastosować zupełnie inne pozycjonowanie, ale nie mam już pomysłu ze względu na braki w posługiwaniu się css.
W każdym razie układ dolnej części strony (górę wyciąłem) powinien się składać z lewej kolumny (na całej wysokości), treści głównej i stopki, która powinna być wyświetlana przy dolnej krawędzi strony.
Kod
<body>
<div id="strona">
<div id="content">
<div id="kontener3">
<div id="lewa_kolumna">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut augue et elit dapibus accumsan. Suspendisse sit amet purus id leo egestas posuere non imperdiet nibh. Nullam tempus pulvinar vehicula. Nunc ornare, odio ac imperdiet porta, mauris erat convallis leo, in ullamcorper mauris mauris nec tellus. Vivamus vehicula pellentesque tortor, sit amet venenatis augue rutrum at. Fusce molestie suscipit scelerisque. Nullam accumsan tortor nec dui bibendum faucibus. Proin ut fringilla elit. Curabitur quis arcu ante. Nulla odio turpis, tincidunt malesuada varius non, dapibus tristique arcu. Etiam porta bibendum suscipit. Vivamus tincidunt elementum orci, commodo congue nibh rutrum sed.
</p>
</div> <!-- lewa_kolumna -->
</div> <!-- kontener3 -->
<div id="kontener4">
<div id="tresc_strony">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut augue et elit dapibus accumsan. Suspendisse sit amet purus id leo egestas posuere non imperdiet nibh. Nullam tempus pulvinar vehicula. Nunc ornare, odio ac imperdiet porta, mauris erat convallis leo, in ullamcorper mauris mauris nec tellus. Vivamus vehicula pellentesque tortor, sit amet venenatis augue rutrum at. Fusce molestie suscipit scelerisque. Nullam accumsan tortor nec dui bibendum faucibus. Proin ut fringilla elit. Curabitur quis arcu ante. Nulla odio turpis, tincidunt malesuada varius non, dapibus tristique arcu. Etiam porta bibendum suscipit. Vivamus tincidunt elementum orci, commodo congue nibh rutrum sed.
</p>
</div> <!-- tresc_strony -->
<div id="stopka">
</div> <!-- stopka -->
</div> <!-- kontener4 -->
</div> <!-- content -->
</div> <!-- strona -->
</body>
<div id="strona">
<div id="content">
<div id="kontener3">
<div id="lewa_kolumna">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut augue et elit dapibus accumsan. Suspendisse sit amet purus id leo egestas posuere non imperdiet nibh. Nullam tempus pulvinar vehicula. Nunc ornare, odio ac imperdiet porta, mauris erat convallis leo, in ullamcorper mauris mauris nec tellus. Vivamus vehicula pellentesque tortor, sit amet venenatis augue rutrum at. Fusce molestie suscipit scelerisque. Nullam accumsan tortor nec dui bibendum faucibus. Proin ut fringilla elit. Curabitur quis arcu ante. Nulla odio turpis, tincidunt malesuada varius non, dapibus tristique arcu. Etiam porta bibendum suscipit. Vivamus tincidunt elementum orci, commodo congue nibh rutrum sed.
</p>
</div> <!-- lewa_kolumna -->
</div> <!-- kontener3 -->
<div id="kontener4">
<div id="tresc_strony">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut augue et elit dapibus accumsan. Suspendisse sit amet purus id leo egestas posuere non imperdiet nibh. Nullam tempus pulvinar vehicula. Nunc ornare, odio ac imperdiet porta, mauris erat convallis leo, in ullamcorper mauris mauris nec tellus. Vivamus vehicula pellentesque tortor, sit amet venenatis augue rutrum at. Fusce molestie suscipit scelerisque. Nullam accumsan tortor nec dui bibendum faucibus. Proin ut fringilla elit. Curabitur quis arcu ante. Nulla odio turpis, tincidunt malesuada varius non, dapibus tristique arcu. Etiam porta bibendum suscipit. Vivamus tincidunt elementum orci, commodo congue nibh rutrum sed.
</p>
</div> <!-- tresc_strony -->
<div id="stopka">
</div> <!-- stopka -->
</div> <!-- kontener4 -->
</div> <!-- content -->
</div> <!-- strona -->
</body>
Kod
body {
background: #FFFFFF;
text-align: center;
}
#strona {
min-width:760px;
max-width:970px;
width:auto !important;
width:970px;
margin:auto;
text-align:left;
background:#FFFF00;
}
/* content */
#content {
position: relative;
width: 100%;
height: 100%;
background: #FFFF00;
}
/* górna część strony wycięta */
/* kontener3 */
#kontener3 {
position: absolute;
top: 245px;
left: 0px;
width: 25%;
background: #FF00FF;
}
#lewa_kolumna {
overflow: hidden;
float: left;
width: 96%;
min-height: 300px;
margin: 5px 0px 5px 5px;
background: #FFFFFF;
}
/* kontener4 */
#kontener4 {
position: absolute;
top: 245px;
right: 0px;
width: 75%;
background: #FF00FF;
}
#tresc_strony {
overflow: hidden;
float: left;
width: 99%;
min-height: 300px;
margin: 5px 5px 5px 0px;
background: #FFFFFF;
}
#stopka {
overflow: hidden;
float: left;
width: 99%;
height: 100px;
margin: 0px 5px 5px 0px;
background: #11FFFF;
}
background: #FFFFFF;
text-align: center;
}
#strona {
min-width:760px;
max-width:970px;
width:auto !important;
width:970px;
margin:auto;
text-align:left;
background:#FFFF00;
}
/* content */
#content {
position: relative;
width: 100%;
height: 100%;
background: #FFFF00;
}
/* górna część strony wycięta */
/* kontener3 */
#kontener3 {
position: absolute;
top: 245px;
left: 0px;
width: 25%;
background: #FF00FF;
}
#lewa_kolumna {
overflow: hidden;
float: left;
width: 96%;
min-height: 300px;
margin: 5px 0px 5px 5px;
background: #FFFFFF;
}
/* kontener4 */
#kontener4 {
position: absolute;
top: 245px;
right: 0px;
width: 75%;
background: #FF00FF;
}
#tresc_strony {
overflow: hidden;
float: left;
width: 99%;
min-height: 300px;
margin: 5px 5px 5px 0px;
background: #FFFFFF;
}
#stopka {
overflow: hidden;
float: left;
width: 99%;
height: 100px;
margin: 0px 5px 5px 0px;
background: #11FFFF;
}
