zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Divs schieben sich beim skalieren Untereinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.07.2009, 10:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2007
Beiträge: 29
Wenqu befindet sich auf einem aufstrebenden Ast
Standard 2 Divs schieben sich beim skalieren Untereinander

Guten Tag,
folgendes Prozedere habe 2 Div Elemente, welche sich beim skalieren untereinander schieben anstatt nebeneinander zu bleiben....

CSS:
HTML-Code:
#right{
	width: 50%;
	min-width:400px;
	float: right;
	background-color:#555;
}



#left{
	width: 50%;
	float:left;
	background-color: #000;
}
HTML
HTML-Code:
<div id="content">
	<div id="left">
		asdasdasd
	</div>
	<div id="right">
		asdasdsd
	</div>
</div>
Woran liegt das?

Gruß Klaus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.07.2009, 10:27
Benutzerbild von Pablo
4 8 15 16 23 42
XHTMLforum-Kenner
 
Registriert seit: 31.05.2004
Beiträge: 1.772
Pablo sorgt für eine eindrucksvolle AtmosphärePablo sorgt für eine eindrucksvolle Atmosphäre
Standard

Vermutlich am doppelten Float.

Probier folgendes:

Code:
<div>
  <div id="right"></div>
  <div id="left"></div>
</div>
Code:
#right {
  float: right;
  min-width: 400px;
}
#left {
  width: 50%;
}
__________________
Go Opera!
… oder Chrome. Auch cool.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.07.2009, 11:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dann nimmt #right allerdings nicht mehr den restlichen verfügbaren Platz ein, sondern immer nur soviel, wie es sein Inhalt verlangt (wenngleich mindestens 400px).

Sein Problem sind Rundungsfehler, denen man mit einem neg. margin entgegenwirken kann, und zwar der Float-Richtung entgegengesetzt (bei einem right-Float also z.B. margin-left: -10px).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.07.2009, 13:32
Benutzerbild von Pablo
4 8 15 16 23 42
XHTMLforum-Kenner
 
Registriert seit: 31.05.2004
Beiträge: 1.772
Pablo sorgt für eine eindrucksvolle AtmosphärePablo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Dann nimmt #right allerdings nicht mehr den restlichen verfügbaren Platz ein, sondern immer nur soviel, wie es sein Inhalt verlangt (wenngleich mindestens 400px).

Sein Problem sind Rundungsfehler, denen man mit einem neg. margin entgegenwirken kann, und zwar der Float-Richtung entgegengesetzt (bei einem right-Float also z.B. margin-left: -10px).
Ich hatte das width:50% beim rechten div übersehen und damit nicht bedacht, dass beide zusammen, immer die volle Breite auffüllen sollen. Natürlich hast Du dann recht.
__________________
Go Opera!
… oder Chrome. Auch cool.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.07.2009, 08:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.07.2007
Beiträge: 29
Wenqu befindet sich auf einem aufstrebenden Ast
Standard

Wie soll das mit dem negativen margin genau funktionieren?

Gruß Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 17.07.2009, 13:21
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Füge bei Deinem Ausgangscode der Regel für #right noch margin-left: -10px; hinzu - das behebt die (IE-typischen) Float-Drops durch Rundungsfehler.

Was in der Natur der Sache liegt, ist dass bei einer Viewport-Breite von z.B. 700px die beiden divs gar nicht mehr nebeneinander passen können, da #right min-width: 400px; hat und #left width: 50%; (also 350px), was zusammen 750px ergibt. Diesen Float-Drop kannst Du nur durch min-width für ein übergeordnetes Element beheben (was min-width für #right überflüssig macht).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
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 Divs (untereinander) parallel mit 3 Divs (untereinander) SimonK. CSS 16 19.02.2009 09:56
2 Divs untereinander Bulvaye CSS 2 04.10.2008 00:50
DIVs unter linkem Browserrand schieben ollidus CSS 1 22.08.2008 12:56
zwei Divs untereinander gleich hoch Moonphoenix CSS 6 15.05.2008 00:13
1 div links, 2 div's untereinander daneben jensr CSS 9 01.07.2004 00:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:10 Uhr.