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

bogazci · #1 (**permalink**) 30.07.2014, 14:09

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 · #2 (**permalink**) 30.07.2014, 18:01

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

bogazci · #3 (**permalink**) 30.07.2014, 18:02

Ziemlich cool,

vielen Dank!

bogazci · #4 (**permalink**) 30.07.2014, 22:06

Noch eine ergänzende Frage:

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

etux · #5 (**permalink**) 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.

Zitat:

Zitat von bogazci

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 · #6 (**permalink**) 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 · #7 (**permalink**) 31.07.2014, 09:30

Zitat:

Zitat von bogazci

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 · #8 (**permalink**) 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 · #9 (**permalink**) 31.07.2014, 19:12

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:

divsnebeneinander.jpg

MrMurphy · #10 (**permalink**) 31.07.2014, 23:13

Hallo,

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

HTML5: Bogazci - Layout, volle Höhe

Gruss

MrMurphy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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