Umsetzung ohne "calc"?

[UID0]

Guten Abend, liebe CBler...
Um gleich auf den Punkt zu kommen: Entweder ich stehe total auf dem Schlauch, oder ich stelle mich einfach zu blöd an.
Ich habe eine Seite erstellt: http://pixota.de/test/
​Um die beiden Container auf beiden Seiten richtig zu skalieren, benutze ich, weil mir nichts besseres eingefallen ist, "calc" im CSS - Code.

Der Body:

body { position:fixed; width: 100%; height:100%; padding:15px; background-color:#2e2e2e; }

Der linke Container:

.pictures {     
    width:65%;
    height:-webkit-calc(100% - 30px);
    height:calc(100% - 30px);
    
    position:static;
    display:block;
    
    background-color:#111;
}

Der rechte Container:

.sidebar {   
    width:-webkit-calc(100% - 65% - 45px);
    width:calc(100% - 65% - 45px);
    height:-webkit-calc(100% - 30px);
    height:calc(100% - 30px);


    display:block;
    margin-left:15px;
    
    background-color:#EFEFEF;
}

Die Sache wäre ja gar kein Problem, wenn nur alle Browser (auch ältere) die Seite richtig anzeigen würden (calc unterstützen).
Sorry, falls es wirklich sehr einfach zu beantworten / lösen ist, aber wie gesagt: Mir ist nichts besseres eingefallen. ^^

Danke schon mal im Voraus.

 

[Daaron]

Du kannst dein Glück z.B. mit "position: absolute; top:0; bottom 30px;" versuchen. Oder mit margin-bottom: 30px;
So n Kram ist nicht ganz ohne.

 

[EDV-Berni]

Nur ein Tipp am Rande, je nachdem was du mit deiner Seite noch vorhast, kann es dir Sorgen bereiten, wenn du deine Container immer auf die volle Fläche aufziehst, da du das Design so an eine flexible Auflösung anpassen musst.

Ich richt meine Container daher immer an einer Mittellinie oder einem Mittelpunkt aus. Von da an positionier ich es dann mit einer festen oder leicht flexiblen Containergröße.
.container {
position: absolute;
left: 50%;
margin-left: -400px; // Annahme eines 800px großen Containers
width: 800px;
}

du kannst dabei auch mit min-width und max-width arbeiten

Vlt hilft es dir weiter, falls ich deine Frage nicht richtig getroffen habe tut es mir leid.
Beste Grüße
EDV-Berni

Edit: Hinzufügen des position tags

 

[Lavaground]

schonmal an jquery .resize() gedacht? http://api.jquery.com/resize/

ich würde hierzu auch ne wrapper div nehmen, macht das ganze nicht unbedingt vom body abhängig, aber wenns nur so sein soll dann nicht zwingend nötig...

und hier was als denkanstoß:

$(window).resize(function(){
      $('div#layer1').each(function(){
        $(this).css('width', $(this).parent().width()-400);
        })
      });

macht das gleiche wie:

width: calc(100% - 400px);

mit dem Unteschied, dass beim Window-Resize alles neu in "pixel" berechnet wird, kannst also das css so lassen und wenn was kein "calc()" kann kommt jquery zum einsatz, oder du lässt das css dann weg ^^
das "Parent" div (in deinem Fall Body, allgemein ein wrapper div) sollte dann auch width: 100%; haben, ist bei dir ja schon der fall xD

 

[UID0]

Erstmal Danke an euch...
@Daaron: Die absolute Positionierung würde jedoch (ohne Javascript), nur in den Höhen Abhilfe schaffen, wenn ich das richtig überdenke.
@EDV-Berni: Deine Idee werde ich mir aufheben, denn es ist eine weitere Möglichkeit für die mittige / außermittige Positionierung.
@Lavaground: Werde ich heute Abend mal versuchen. Gefällt mir gut, beide Möglichkeiten dem Browser anzubieten.

Ergänzung (31. März 2013)

Also Lavaground, hat wunderbar funktioniert:
​

$(window).resize(function(e) {    
    $("div.pictures").each(function(index, element) {
        $(this).css("height",$(this).parent().height()-30 + "px");
    });

    $("div.sidebar").each(function(index, element) {
        $(this).css("width",$(this).parent().width()-$(this).parent().width()*0.65 - 45 + "px");
        $(this).css("height",$(this).parent().height()-30 + "px");
    });
});


$(document).ready(function(e) {
    $("div.pictures").each(function(index, element) {
        $(this).css("height",$(this).parent().height()-30 + "px");
    });
​
    $("div.sidebar").each(function(index, element) {
        $(this).css("width",$(this).parent().width()-$(this).parent().width()*0.65 - 45 + "px");
        $(this).css("height",$(this).parent().height()-30 + "px");
    });
});

 

[MaverickM]

Ich richt meine Container daher immer an einer Mittellinie oder einem Mittelpunkt aus. Von da an positionier ich es dann mit einer festen oder leicht flexiblen Containergröße.
.container {
position: absolute;
left: 50%;
margin-left: -400px; // Annahme eines 800px großen Containers
width: 800px;
}

Ein einfaches

margin-left:Auto; margin-right:auto;

tuts auch und man erspart sich viel Ärger durch die absolute Positionierung des Containers.

 

[Lavaground]

yay freut mich geholfen zu haben

 

[Daaron]

@Falcon: Die Sache mit "margin:0 auto;" klappt nur, wenn der zu zentrierende Container eine feste Breite hat. Verdammt oft muss man aber Container zentrieren, deren Breite variabel ist. Da geht nix über "left: -50%;margin-left:50%;"

 

[QXARE]

*delete

 

[MaverickM]

@Daaron: Der von mir zitierte Snippet hat aber eine feste Breite

 

[UID0]

Nicht streiten. ^^ Hatte anfangs auch immer so gearbeitet (mit absoluter zentrierter Positionierung), bis ich die automatischen Abstände ausprobiert habe.
Geht beides. Das eine eignet sich für manche Dinge vielleicht besser als das andere, und manchmal auch anders herum.

PS: Keine Prügelei in meinen Threads. Klärt das draußen!

 

[MaverickM]

Solang es konform ist und funktioniert ist es auch OK. Wollte auch nur darauf hinweisen, dass man mit absoluter Positionierung eben nur unter bestimmten Umständen arbeiten sollte.

 

[Lavaground]

Responsive css ftw ^^