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 15: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 19:01

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

bogazci 30.07.2014 19:02

Ziemlich cool,

vielen Dank!

bogazci 30.07.2014 23:06

Noch eine ergänzende Frage:

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

etux 31.07.2014 10: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 10: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 10: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 10: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 20: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 01.08.2014 00:13

Hallo,

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

HTML5: Bogazci - Layout, volle Höhe

Gruss

MrMurphy


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:29 Uhr.

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

© Dirk H. 2003 - 2023