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
  #1 (permalink)  
Alt 30.07.2014, 14:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2014, 18:01
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
Hier JSFiddle hast du all die code für HTML und CSS die DU brauchst, mit beschreibung
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.07.2014, 18:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Ziemlich cool,

vielen Dank!
Mit Zitat antworten
  #4 (permalink)  
Alt 30.07.2014, 22:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Noch eine ergänzende Frage:

Wie könnte ich das rechte DIV auf 100% Höhe setzen?
Mit Zitat antworten
  #5 (permalink)  
Alt 31.07.2014, 09:17
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

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 Beitrag anzeigen
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>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (31.07.2014 um 10:03 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 31.07.2014, 09:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 31.07.2014, 09:30
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
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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 31.07.2014, 09:55
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

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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (31.07.2014 um 10:08 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 31.07.2014, 19:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.07.2014, 23:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.103
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

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

HTML5: Bogazci - Layout, volle Höhe

Gruss

MrMurphy
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 11:07 Uhr.