✔ 2 Divs nebeneinander - Breite verhält sich komisch

Hier die Ursache
Code: 
	<!-- CONTENT -->
				<h1>Welcome to Brootex.com!</h1><hr>			</div>
		</div> <!-- dieser kommt vorm </body> -->
 
So, nachdem die Seite wieder verfügbar ist, hab ich das angesprochene CSS-Boxmodell rechnerisch überprüft ;-)

http://brootex.com/resources/stylesheets/default.css hat gesagt.:
CSS: 
#pageraster {
width: 72em;
}
#content {
width:53.55em
border-left: 0.1em solid #CCCCCC;
border-right: 0.1em solid #CCCCCC;
padding:1em;
/* Summe in der Breite = 55.75em */
}
#right {
width: 14em;
border-right: 0.1em solid #CCCCCC;
padding-left: 1.5em;
padding-right: 1em;
/* Summe in der Breite = 16.6em */
}
Zum Vergrößern anklicken....
Daraus folgt: 55.75em + 16.6em = 72.35em > 72em
 
Vielen Dank nochmal für die Antworten. Ich bin noch nicht so gut, da ich nur ein Informatiker-Lehrling bin und noch am lernen bin. Naja ich finde die Antworten von djheke sehr gut, da ich diese auch zur Verbesserung der Seite verwenden kann. Die Navigation muss ich sowieso noch komplett überarbeiten, weshalb auch noch keine unnummerierte Listen verwendet wurden.

Und jetzt wieder zum Div-Problem: Ich verstehe nicht ganz, spicelab du sagst dass die em-Werte nicht genau die Breite des "pageholders" ergeben? Ich habe auf jeden Fall geschafft, dass die beiden Boxen nun nebeneinander sind, aber wenn man das Fenster vom Browser (bei mir zur Zeit Chrome) verkleinert, dann wird das rechte Div wieder nach unten geschoben.
Hoffentlich wisst ihr weshalb das so ist, ich werde noch die em-Werte zusammenzählen und die Breite richtig machen.

EDIT: Habe die Werte nun angepasst und nach meinen Nachrechnungen ergeben sie nun 72em. Jetzt ist jedoch die Breite wieder sichtbar kleiner als das Menü darüber.
 
Zuletzt bearbeitet:
Wenn sich #right (unter Berücksichtigung der zu korrigierenden Dimensionierungsfehler!) wieder innerhalb von #pageraster befindet, wird es von den Browsern bei verkleinerten Viewport nicht nach unten umgebrochen, sondern dem Nutzer wunschgemäß der horizontale Scrollbalken zur Verfügung gestellt - siehe hierzu auch mein gestriges Demo.

Dass dir dort ein Rechenfehler unterlaufen ist, hab ich in meinem letzten Beitrag nachgewiesen.
 
Zuletzt bearbeitet:
Ja das war nicht mal ein Rechenfehler, als mehr ein nicht kontrollieren. :D Ich habe sie nun wieder im Pageraster (beide Divs) aber wenn man auf die Seite geht, sieht man, wie das Div #right auf seiner rechten Seite nicht gleich aufliegt, wie das Menü darüber, welches auch im #pageraster ist und 100.1% Breite hat.
 
Brootex hat gesagt.:
[...] Ich habe sie nun wieder im Pageraster (beide Divs) aber wenn man auf die Seite geht, sieht man, wie das Div #right auf seiner rechten Seite nicht gleich aufliegt, wie das Menü darüber, welches auch im #pageraster ist und 100.1% Breite hat.
Zum Vergrößern anklicken....
Dann entferne mal umgehend komplett diese Angabe für #header u. #menu, denn die linke und rechte Rahmenstärke wird, wie in meinem genannten Link zum Boxmodell erläutert, zu width addiert, was deutlich mehr als 100% ergibt, und deshalb die Breite des umschließenden DIV überschreitet, dessen gewählte Breite in "em" den 100% entspricht.

Entfallen hier diese width-Regeln, expandieren auch nicht die Boxenbreiten wegen des deklarierten Rahmens.
 
Zuletzt bearbeitet:
Das habe ich komplett vergessen. Aber ich verstehe es irgendwie trotzdem nicht. Ich habe nun die Breite des Headers und des Menüs auf 71.8em (72em - 2x 0.1em wegen des Borders) heruntergesetzt und auch mit width: auto; wird die Breite nicht gleich wie die der rechten Box.
 
Wenn diverse Browser mit den vorgenommenen Korrekturen noch immer nicht klarkommen, nutze einfach das CSS meines alternativen funktionstüchtigen Lösungbeispiels.
 
Zuletzt bearbeitet:
Lass doch einfach alle border,padding und margins weg. Diese kannst du ja den enthaltenden Elementen zuweisen. Ist am einfachsten.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück