Witam, robię szablon panelu administracyjnego autorskiego i mam problem z jego zakodowaniem, a konkretniej chodzi o to że chcę zrobić:

HEADER - szerokość 100%, wysokość np. 50px, poistion: absolute;
LEWA_STRONA - tło lewej strony jest np. czarne, szerokość jest ustawiona stała np. 200px.
PRAWA_STRONA - tutaj chcę żeby PRAWA_STRONA miała szerokość 100% niezależną od rozdziałki osoby która przegląda stronę.

i tu zaczyna się problem. Najlepiej jakby było coś w stylu: prawa_strona { width: 100% - 200px; }

Jak dam prawa_strona:

{
float: right;
width: 100%;
}

a lewa_strona {
float: left;
width: 200px;
}

to prawa_strona ucieka mi poniżej lewa_strona czyli tak jakby się nie mieści.

Co robić?

[HTML] pobierz, plaintext 
 
 prawa_strona
{
float: right;
width: 100%;
}
 
lewa_strona {
float: left;
width: 200px;
position: absolute;
}
[HTML] pobierz, plaintext 

Jest prawie dobrze, problem w tym że prawa_strona nachodzi mi na lewa_strona ;(

Do tego możesz użyć box-sizing:border-box i wewnątrz element pozycjonowany absolutnie, ewentualnie calc.

miras, nie ma czegoś takiego jak float i absolute.

@miras
float i width: 100%? jaki to ma sens?
float i position: absolute - tak samo

coś takiego może zadziałać

[HTML] pobierz, plaintext 
.lewa_strona {
   float:left;
   width:200px;
}
 
.prawa_strona {
    padding-left: 200px;
}
[HTML] pobierz, plaintext 

Zapomniałem usunąć float'a, ale faktycznie moje rozwiązanie nie jest dobre, bo divy wtedy się tylko pokrywają zamiast być obok siebie..

Paweł, twój sposób w sumie działa, ale zniknął mi cały content to co mam w prawa_strona dopiero jak float dam to się pokazuje ale pod lewa_strona

coś musiałeś zepsuć bo u mnie działa

http://jsfiddle.net/tfg7wLa3/

Jest ok, to przez clear: both; które miałem.

Od razu mam pytanie, bo chcę zrobić taki szablon full auto width; i mam content (prawa_strona) i tam powiedzmy 4 boxy. Chcę żeby każdy miał 25% szerokóści to dodałem:

li {
width: 25%;
float: left;
}

no i dobra, ładnie pięknie, ale chcę żeby te boxy miały odstęp od siebie z 20px więc:

li { margin: 0px 25px 0px 0px;
.last { margin: 0; }

i wiadomo... ostatni box wyrzuca mi pod resztę

w takim wypadku możesz zrobić to co zasugerował trueblue, mianowicie
- albo ustawić box-sizing: border-box + padding (margin nie zadziała)
- albo calc (tutaj trochę gorzej ze wsparciem przeglądarek)

hmm.. dałem dla <li>

li {
box-sizing: border-box;
padding: 15px 20px 15px 20px;
}

i dalej nie ma odstępu. Dodam że li ma ustalone tło, to może przez to?

@edit:

zmieniłem w LI: float left na display: inline-block; i niby jest teraz odstęp ale co z tego jak znowu ostatni box spadł pod resztę, a odstęp jak dałem 20px z lewej i prawej to jest dużo mniejszy ;o

http://jsfiddle.net/xbqd9jvt/

Dzięki, ale mi chodzi o to jak to zastosować dla <li> :/

Nie możesz zmienić div na li?
Pokaż swoją strukturę html.