XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   2 Div's nebeneinander, links variabel (100%), rechts 300px fix (http://xhtmlforum.de/showthread.php?t=71183)

bogazci 30.07.2014 14:09

2 Div's nebeneinander, links variabel (100%), rechts 300px fix
 
Hallo *,

ich habe ein kleines Problem, wo ich so nichts zu finden.

Ich habe 2 Divs nebeneinander angeordnet. Das Linke soll die Restfläche fülle und das Rechte 300px feste Breite aufweisen.

Alles was ich gefunden habe bezieht sich auf links fix und rechts variabel. Aber das konnte ich nicht umbauen.

Hat jemand eine Idee wie das man realisieren kann?

Gruß
Yavuz

Toro 30.07.2014 18:01

Hallo,
Hier JSFiddle hast du all die code für HTML und CSS die DU brauchst, mit beschreibung

bogazci 30.07.2014 18:02

Ziemlich cool,

vielen Dank!

bogazci 30.07.2014 22:06

Noch eine ergänzende Frage:

Wie könnte ich das rechte DIV auf 100% Höhe setzen?

etux 31.07.2014 09:17

Es wundert mich schon, dass Dich so eine „Pi mal Daumen“-Lösung zufrieden stellt. Aber ich kenne ja die Aufgabengegebenheiten nicht. ;) :D
Zitat:

Zitat von bogazci (Beitrag 540564)
Wie könnte ich das rechte DIV auf 100% Höhe setzen?

100% von was? Vom Viewport?
Oder soll die fixe Spalte genau so hoch sein wie die flüssige Spalte?

Nachtrag:
Hier drei einfache Beispiele, die man umbauen und ergänzen könnte. Weitere Lösungswege sind auch möglich – dazu müssten aber Aufgabestellung und -Umgebung (html-Code) bekannt sein:
HTML-Code:

<!doctype html>
<meta charset="UTF-8">
<title>bogazci :: xhtmlforum.de</title>
<style>
/* Einschliessen der Floats */
.wrap-1:before,
.wrap-1:after,
.wrap-2:before,
.wrap-2:after,
.wrap-3:before,
.wrap-3:after { content: " "; display: table; }
.wrap-1:after,
.wrap-2:after,
.wrap-3:after { clear: both; }

/* Margin neben (unter) Float */
.wrap-1 .fix { float: right; width: 300px; background-color: #ddd; }
.wrap-1 .liquid { margin-right: 300px; background-color: #eee; }

/* Negativer Margin auf Padding */
.wrap-2 { padding-right: 300px; }
.wrap-2 .fix { float: right; width: 300px; margin-right: -300px; background-color: #ddd; }
.wrap-2 .liquid { float: left; width: 100%; background-color: #eee; }

/* Negativer Margin auf Border - Simulation gleich hohen Spalten */
.wrap-3 { border-right: 300px solid #ddd; background-color: #eee; }
.wrap-3 .fix { float: right; width: 300px; margin-right: -300px; }
.wrap-3 .liquid { float: left; width: 100%; }

</style>

<h1>Zum <a href="http://xhtmlforum.de/71183-2-divs-nebeneinander-links-variabel-100-a.html">Forum-Thread</a></h1>
<h2>Margin neben (unter) Float</h2>
<div class="wrap-1">
  <div class="fix">
    <p>Feste Breite</p>
  </div>
  <div class="liquid">
    <p>Flüssige Breite</p>
  </div>
</div>
<h2>Negativer Margin auf Padding</h2>
<div class="wrap-2">
  <div class="fix">
    <p>Feste Breite</p>
  </div>
  <div class="liquid">
    <p>Flüssige Breite</p>
  </div>
</div>
<h2>Negativer Margin auf Border</h2>
<div class="wrap-3">
  <div class="fix">
    <p>Feste Breite</p>
  </div>
  <div class="liquid">
    <p>Flüssige Breite</p>
  </div>
</div>


bogazci 31.07.2014 09:25

Hehe,

naja ich könnte mir mein Problem 100% lösen lassen, oder aber Deine Lösung als Hilfestellung nehmen und selber was dabei lernen während ich es für mich anpasse.

Zur 2. Frage:
100% vom Viewport

etux 31.07.2014 09:30

Zitat:

Zitat von bogazci (Beitrag 540568)
Zur 2. Frage:
100% vom Viewport

Dann könntest Du das letzte Beispiel von oben nehmen und anpassen. Als wrap-div kann auch body genommen werden.

etux 31.07.2014 09:55

Korrektur:
Sorry, in der Eile habe ich die Breitenangabe bei der fixen Spalte vergessen (letztes Beispiel) – habe ich gerade im Beispiel-Code ergänzt.

Korrektur 2:
Zum Einschließen der Floats eignet sich „overflow: hidden;“ im dritten Beispiel natürlich nicht – mein Fehler. Habe ich mit dem Hack von Nicolas Gallagher ausgetauscht.

bogazci 31.07.2014 19:12

Liste der Anhänge anzeigen (Anzahl: 1)
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 :(

Das ist was ich möchte:

Anhang 5138

MrMurphy 31.07.2014 23:13

Hallo,

ich würde das ganze mit flexbox lösen:

HTML5: Bogazci - Layout, volle Höhe

Gruss

MrMurphy

bogazci 01.08.2014 08:04

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.

etux 01.08.2014 08:09

Zitat:

Zitat von bogazci (Beitrag 540578)
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. ;) :no:

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>



Alle Zeitangaben in WEZ +2. Es ist jetzt 01:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022