Linke box automatisch verkleinern

[MiST3R_C0R3]

Hallo,

ich habe folgendes Szenario:

zwei Boxen sind nebeneinander angeordnet. Die Linke hat eine max-width von 600px. Die recht eine feste breite von 220px (+80 left padding). Die Boxen sind gefloated, um nebeneinander zu erscheinen. Wenn ich mein Browserfenster verkleinere, möchte ich, dass sich die Linke automatisch verkleinert und die rechte rechts bleibt. Bei mir verschiebt sich aber erst die rechte Box nach unten, bevor sich die Linke verkleinert.

Ich habe eine Weile rumgespielt, konnte aber keine Lösung findet. Weiß hier vielleicht jemand bescheid?

<div id="content">Lorem ipsum....</div>
<div id="sidebar">Lorem ipsum...</div>

#content {
	max-width: 600px;
	float: left;
}

#sidebar {
	padding-left: 80px;
	float: left;
	width: 220px;
}

Liebe Grüße,
MiST3R_C0R3

 

[Trüffelkrieger]

Vergib deinem #content auch mal eine "min-width", ist aber nur eine Vermutung, habe das noch nie gebraucht xD

 

[MiST3R_C0R3]

Eine Min-Width ist von meiner Grundidee nicht möglich, da sich die Box rein theoretisch auch auf 0px verkleinern darf. Also wäre die min-width 100% (oder 0px), und da dass die Standardbreite eines DIVs ist, ist es schon "richtig".

 

[Trüffelkrieger]

Hmm, dann lass die sidebar mal rechts floaten.

 

[MiST3R_C0R3]

Selbes Ergebniss, Box springt nach unten.

 

[MiST3R_C0R3]

Hallo,

habe hier eine Lösung gefunden, die funktioniert. Möchte sie teilen, für Leute, die evtl. das selbe Problem haben.

Die zwei Boxen haben einen Wrapper-Div bekommen,welches relativ positioniert ist. Das hat nur eine maximale Breite. Die linke, variable Box hat ein padding-right mit der gesamten Breite der rechten Box. Die Rechte Box wurde absolut ganz rechts positioniert. Fertig.

<div id="wrapper">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

#wrapper {
 max-width: 900px;
 position: relative;
}

#content {
 padding-right: 300px;
}

#sidebar {
 width: 220px;
 position: absolute;
 right: 0;
 top: 0;
}

Grüße,
Max