Umbruch bei divs verhindern
Casablanca
- css
0 T-Rex0 Jörg Reinholz0 Gunnar Bittersmann0 Casablanca0 MudGuard
Hallo Forum,
ich habe da ein Problem, das ich leider nicht lösen kann. Es gibt da drei divs wie folgt:
<style>
.myDiv {
float:left;
}
.myInnerDiv {
float:rigth;
}
</style>
<div id="myDiv" style="width:94%">
<div id="myInnerDiv"></div>
</div>
<div id="myDiv"></div>
<div id="myDiv"></div>
Wie kann ich einen Umbruch da verhindern, wenn das Browserfenster verkleinert wird? Das "myInnerDiv" sollte auch nicht umgebrochen werden.
Gruß
.bigboss
{
min-width: 1000px; /* oder was du willst */
}
<div class='bigboss'>
<div id="myDiv" style="width:94%">
<div id="myInnerDiv"></div>
</div>
<div id="myDiv"></div>
<div id="myDiv"></div>
</div>
Gruß
Big Boss
T-Rex
Wie kann ich einen Umbruch da verhindern, wenn das Browserfenster verkleinert wird? Das "myInnerDiv" sollte auch nicht umgebrochen werden.
Steht doch in der Zeile darüber:
width, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width@title=min-width
Hinweis:
<div id="myDiv"></div>
<div id="myDiv"></div>
Eine ID soll eindeutig sein und darf nur GENAU EINMAL verwendet werden.
Jörg Reinholz
@@Casablanca:
nuqneH
Wie kann ich einen Umbruch da verhindern, wenn das Browserfenster verkleinert wird?
Du suchst die white-space-Eigenschaft?
Qapla'
Hallo,
danke für die Antworten. Ich habe da was durcheinander gebracht:
<style>
.myDiv {
float:left;
}
#myInnerDiv {
float:rigth;
}
</style>
<div class="myDiv" style="width:94%">
<div id="myInnerDiv"></div>
</div>
<div class="myDiv"></div>
<div class="myDiv"></div>
Mit einer Mindestbreite ist es nicht getan. Die Breite sollte variabel sein, wenn das Fensterbbreite sich ändert. Die divs sollten aber halt nicht umbrechen.
Gruß
<style>
.myDiv {
float:left;
}#myInnerDiv {
float:rigth;
}
</style><div class="myDiv" style="width:94%">
<div id="myInnerDiv"></div>
</div>
<div class="myDiv"></div>
<div class="myDiv"></div>
>
> Mit einer Mindestbreite ist es nicht getan. Die Breite sollte variabel sein, wenn das Fensterbbreite sich ändert. Die divs sollten aber halt nicht umbrechen.
Du meinst, die div der klasse myDiv sollen hübsch nebeneinander bleiben?
Naja. Es könnte auch so gehen:
~~~html
<!doctype html>
<div style="min-width:999px;padding:0;margin:0">
<div style="display:inline-block;margin:0;width:333px;background-color:red;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>
<div style="display:inline-block;margin:0;width:333px;background-color:blue;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>
<div style="display:inline-block;margin:0;width:333px;background-color:green;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>
</div>
Alternativ kann man auch ein Verhalten wie bei einer Tabelle erzwingen:
<!doctype html>
<style type="text/css">
.table {display:table;}
.row {display:table-row; }
.cell{display:table-cell; width:33%}
</style>
<div class="table">
<div class="row">
<div class="cell" style="background-color:red">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>
<div class="cell" style="background-color:blue">Foo, Bar, Foo, Bar, Foo, Bar, </div>
<div class="cell" style="background-color:green">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>
</div>
Hallo Jörg,
danke für die Hilfe. Leider werden die divs bei dem ersten Beispiel immer noch umgebrochen, wenn das Browserfenster verkleiert wird. Dsa zweite Beispiel haut auch nicht ganz hin, weil ich da viele andere verschachtelten divs habe, wodurch deren Formatiereung aus dem Rahmen gerät.
Gruß
Om nah hoo pez nyeetz, Casablanca!
danke für die Hilfe. Leider werden die divs bei dem ersten Beispiel immer noch umgebrochen, wenn das Browserfenster verkleiert wird.
Ja, du suchst die Whitespace-Eigenschaft. Und zwar mit dem Wert nowrap für das umgebende Element.
div {
width: 25%;
}
<div>1</div><div>2</div><div>3</div><div>4</div>
und
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
liefern mit obigem CSS andere Darstellungen.
Matthias
Hi,
die white-space:nowrap-Eigenschaft bezieht sich auf den Text und nicht auf ein div-Element. Die divs müssen sich von der Größe her an das Fenster anpassen aber nicht umbrechen.
Gruß
Om nah hoo pez nyeetz, Casablanca!
die white-space:nowrap-Eigenschaft bezieht sich auf den Text und nicht auf ein div-Element. Die divs müssen sich von der Größe her an das Fenster anpassen aber nicht umbrechen.
Genau. Auch auf den Whitespace zwischen den Elementen. Deshalb schrieb ich „für das umgebende Element“.
<div>1</div>EIN
<div>2</div>ZEILENUMBRUCH
<div>3</div>IST
<div>4</div>WHITESPACE
Matthias
danke für die Hilfe. Leider werden die divs bei dem ersten Beispiel immer noch umgebrochen, wenn das Browserfenster verkleiert wird.
Ja. Mach den umgebenden Div etwas größer und es klappt.
Dsa zweite Beispiel haut auch nicht ganz hin, weil ich da viele andere verschachtelten divs habe, wodurch deren Formatiereung aus dem Rahmen gerät.
Dann solltest uns uns zeigen, was Du wirklich hast.
Jörg Reinholz
Hi,
.myInnerDiv {
float:rigth;
}
right schreibt sich anders.
cu,
Andreas
--
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)
[O o ostern ...](http://ostereier.andreas-waechter.de/)
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.