Mam kontener z position: relative, a w nim 2 divy z position: absolute. Muszę coś zrobić, żeby kontener rozciągał się na wysokość taką, jaką osiągną divy w nim. Jak to można zrobić?
#kontener
{
position: relative;
width: 100%;
}
#main-text
{
position: absolute;
left: 0px;
right: 300px;
padding: 20px 12px 20px 12px;
}
#sidebar
{
position: absolute;
right: 0px;
width: 300px;
top: 0px;
bottom: 0px;
}
Nie musisz wewnętrznych div'ów dawać jako absolute żeby tak rozmieścić treść w kontenerze. Zresztą kontener to złe pojęcie dla tego przypadku ale mniejsza o to. Przede wszystkim jeśli dobrze rozumiem to co chcesz osiągnąć to całkowicie źle to zaprojektowałeś. Może najpierw przedstaw na rysunku o jakie rozmieszczenie treści Ci chodzi. Czy stronka ma być na całą szerokość strony? Czy szerokość treści ma dopasowywać się do szerokości strony a sidebar ma zawsze mieć stałą szerokość?
Ok więc opiszę co chcę osiągnąć, bo zacząłem już szukać innego rozwiązania niż position absolute.
Mam div, który ma zmienną szerokość. W nim są 2 divy. Jeden zawiera treść strony i powinien się rozciągać na szerokość głównego diva minus 300px, drugi natomiast to sidebar o szerokości właśnie 300px i ma być z prawej strony.
| div o zmiennej szerokości 1 |
|---|
| strona 2 |
| div o zmiennej szerokości 1 |
|---|
| strona 2 |
mniej więcej tak to ma wyglądać. Zrobiłem to na razie za pomocą display: table i display: table cell, ale wolałbym to zrobić inaczej, bo trzeba specjalne style dla ie zrobić i coś nie do końca mi to dobrze działa w google chrome. Najlepszym sposobem wydawało mi się właśnie position relative dla 1 i absolute dla 2 i 3, ale wtedy div 1 nie rozciąga się na taką wysokość jaką osiągną 2 i 3. Jak mogę to rozciągnąć?
float:right;width:300px; dla 3, dla pozostałych width:100%