zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Div's nebeneinander, links variabel (100%), rechts 300px fix

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 01.08.2014, 08:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Leider funktioniert das aber nicht mit dem IE9

Getestet mit Chrome, FF und IE9. Bei Chrome und FF keine Probleme. Bei IE9 geht es aber leider nicht. Ich muss zumindest IE9 und höher können.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 01.08.2014, 08:09
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von bogazci Beitrag anzeigen
Ich habe das mal in ein fiddle gepackt 2 DIVs nebeneinander - JSFiddle aber bekomme die 100% Höhe für das fixe div nicht hin
Wäre es nicht sinnvoller zu zeigen, was Du versucht hast und woran Du gescheitert bist.

Hier ein paar mögliche Lösungswege:

min-height für body
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>min-height für body :: xhtmlforum.de</title>
<style>

* { margin: 0; padding: 0; }

/* Einschliessen der Floats */
body:before,
body:after { content: " "; display: table; }
body:after { clear: both; }

html { height: 100%; }
body { min-height: 100%; }

body { border-right: 300px solid #b3a400; background-color: #d6d6d6; }

.fix { float: right; width: 300px; margin-right: -300px; }
.liquid { float: left; width: 100%; background-color: #b9babe; }

</style>
<div class="fix">
  <p>Feste Breite</p>
</div>
<div class="liquid">
  <p>Flüssige Breite</p>
</div>
min-height für html
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>min-height für html :: xhtmlforum.de</title>
<style>

* { margin: 0; padding: 0; }

html { min-height: 100%; border-right: 300px solid #b3a400; background-color: #d6d6d6; }
body { float: left; width: 100%;}

.fix { float: right; width: 300px; margin-right: -300px; }
.liquid { float: left; width: 100%; background-color: #b9babe; }

</style>
<div class="fix">
  <p>Feste Breite</p>
</div>
<div class="liquid">
  <p>Flüssige Breite</p>
</div>
css-table
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>css-table :: xhtmlforum.de</title>
<style>

html { display: table; width: 100%; height: 100%; table-layout: fixed; }
body { display: table-row; }
.fix,
.liquid { display: table-cell; }

body { background-color: #d6d6d6; }
.liquid {  }
.liquid p { background-color: #b9babe; }
.fix { width: 300px; background-color: #b3a400; }

</style>

<div class="liquid">
  <p>Flüssige Breite</p>
</div>
<div class="fix">
  <p>Feste Breite</p>
</div>
position
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>position :: xhtmlforum.de</title>
<style>

html { padding-right: 300px; }
body { background-color: #d6d6d6; }

.fix { position: absolute /* fixed - zunächst kein scrollen */; top: 0; right: 0; width: 300px; min-height: 100%; background-color: #b3a400; }
.liquid { background-color: #b9babe; }

</style>
<div class="fix">
  <p>Feste Breite</p>
</div>
<div class="liquid">
  <p>Flüssige Breite</p>
</div>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 sp, mitte fix, rechts + links variabel ??? DevStyle CSS 8 13.02.2007 23:19
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 18:20
Drei divs nebeneinander, das rechts füllt Bildschirm aus Vanquish CSS 6 08.08.2005 14:05
3 Divs, links u. rechts dynamisch - mitte feste breite donhoolio CSS 3 04.04.2005 15:59
1 div links, 2 div's untereinander daneben jensr CSS 9 30.06.2004 23:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:15 Uhr.