XHTMLforum - DIVs nebeneinander ohne Umbruch

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - DIVs nebeneinander ohne Umbruch (http://xhtmlforum.de/showthread.php?t=55345)

DIVs nebeneinander ohne Umbruch

Hallo zusammen!

Ich möchte gerne mehrere DVIs nebeneinander anordnen. Ich weiss nicht wie viele und nicht wie breit sie werden, kann also die gesamte Breite nicht angeben. Die DIVs sollen auf jeden Fall ohne Umbruch nebeneinander stehen, wenn nötig auch über die Browserbreite hinaus. Etwa so:

http://modulabor.de/Tocki-Test/divs-nebeneinander.jpg

bisher löse ich es mit "float:left;", was natürlich zu einem Umbruch führt.
Bitte helft mir!

Danke, t.

Dann musst Du die Umgebung der divs scrollbar machen.

Code:

overflow: scroll;

und ihr eine feste Breite geben.

Ja genau das ist ja das Problem: Ich kann keine Gesamtbreite angeben, weil ich die Breite nicht kenne (das ganze soll dynamisch befüllt werden).

Ich bräuchte irgendwas, wie "white-space: nowrap", das funzt nur leider nicht, oder ich wende es falsch an :( Bisher hab ichs so:

HTML-Code:

                /* Übergeordnetes DIV: */

                .TockiShaddow-BOX {

                 white-space: nowrap;

                 float: left;

                 height: 498px;

                 margin-top: 50px;

                 margin-left: 150px;

                }



                /* linkes DIV: */                

                .TockiShaddow-links {

                 float: left;

                 background:url(css-bilder/TockiShaddow-links.png) left top no-repeat;

                 width: 45px;

                 height: 498px;

                }

                

                /* mittleres DIV: */        

                .TockiShaddow-mitte {

                 float: left;

                 display: inline;

                 background: url(css-bilder/TockiShaddow-mitte.png) repeat-x;

                 height: 498px;

                }



                /* rechtes DIV: */                        

                .TockiShaddow-rechts {

                 float: left;

                 display: inline;

                 background:url(css-bilder/TockiShaddow-rechts.png) right top no-repeat;

                 height: 498px;

                 width: 39px;

                }

Es gibt also ein DIV links (mit fester Breite), eines rechts (ebenfalls mit fester Breite) und das in der Mitte soll nun eben so breit werden, wie der Inhalt breit sein wird. Alle drei sollen aber IMMER nebeneinander angezeigt werden.

habe da ein ähnliches problem, nur funktioniert das bei mir schon mit festen werten nicht!

siehe hier http://xhtmlforum.de/55348-berschnei...ger-werte.html

Ne, wenn ich dem übergeordneten DIV eine feste Breite geben dann funktioniert das bei mir ganz hervorragend...

Hi zusammen

@noob,t.ockert

Ich habe auch schon auf einigen Sachen an der Problematik rumgebastelt und gesucht.

Threadi hat es schon angetönt.

Wenn der Umgebende Div keine fixe Breite hat, wird es nicht funktionieren.
Bei mir ist auch vieles Dynamisch da ich mit ASPX (ASP.NET 2.0) arbeite. Teilweise musst du aber auf die einte oder andere Art in den sauren Apfel beissen;

Position Absolut um auf den zweit-thread von noob zu antworten zerreisst dir sowieso alles. Hier wirst du auch sehr schöne Probleme bekommen wenn du zwischen IE7 und Firefox wechselt. Das sieht dann jeweils ganz anders aus.
Ich kann mir den Luxus leisten Firefox nicht ins Layout einzubeziehen.

Um auf die Grundproblematik zurückzukommen;

Ich mach hier n kleines Beispiel mit 2 Divs (ist eigentlich egal wieviele);
BasisProblem;
Die meist vorgeschlagene Möglichkeit 2 divs nebeneinander zu positionieren ist; beiden Divs das Float Left zu geben:

HTML-Code:

<div id="container"> 

<div style="height: 100px; width: 100px; background-color: red;float:left"></div>

<div style="height: 100px; width: 100px; background-color: blue;float:left"></div>

</div>

Wenn du nun den Browser kleiner machst als die 200 Pixel, dann wird das "rechte" Div unter dem linken Div angezeigt, da es "Fliesst". --> Und blöder weise ist "fliessen" die vorgeschlagene Möglichkeit die nebeneinander darzustellen.

Nun schau dir folgendes an;

HTML-Code:

<div id="container" style="width:200px"> 

<div style="height: 100px; width: 100px; background-color: red;float:left"></div>

<div style="height: 100px; width: 100px; background-color: blue;float:left"></div>

</div>

Die Divs fliessen nun nicht mehr da der Container ne fixe breite hat. Ohne diese fixe Breite, nix nebeneinander.

Mein Vorschlag, auch wenn ich hier wohl Kritik ernte;
Nimm Tabellen.
Denn wenn du die Div Breite nicht fix setzen kannst, resp. der Inhalt die Breite definieren soll, gehts net so wie dus willst.

Beispiel;

HTML-Code:

        <table>

        <tbody>



        <tr>

        <td><div style="height: 4px; width: 100px;background-color: red"></div></td>

        <td><div style="height: 4px; width: 100px;background-color: blue"></div></td>

        <td><div style="height: 4px; width: 100px;background-color: fuchsia"></div></td>

        </tr>        

        

        </tbody>

        </table>

Die Divs in diesem Beispiel haben ne symbolische breite von 100px, in deinem Beispiel wird der Inhalt vielleicht dynamisch sein, mir gehts darum dass du der Tabelle keine Breite gibst und sie nicht floated, sonst was machst und der Browser Scrollbars anzeigt wenn nicht alles Platz hat.

Gruss

@Edit Ein Beispiel entfernt das nicht zum Thema passt.

Hey Lexodus!

Danke für deine Antwort. Ja, das mit der Tabelle hab ich auch schon auf mich zukommen sehen. War mir nur nicht sicher, ob es da vielleicht eine Lösung zum Auslesen der aktuellen Breite, oder sowas gibt, die ich nicht kenne.

Vielen Dank jedenfalls für Deine Mühe!
Gruss, t.

Gerne.

Zum auslesen;

Das kannst du in Prinzip schon, mit JavaScript. Dann könntest du deinem DIV mit Javascript eine Breite setzen. (Du musst dann aber den Inhalt per Javascript auslesen, die "grösstmögliche" Breite des Inhalts berechnen und die dann dem Umgebenden Div setzen.

Die Funktion könntest du beim Onload aufrufen.

Sodala

Das Javascript hätte ich auch fertig;
Aufrufbar im body onload;

HTML-Code:

<body onload="AutoSize">



<script type="text/javascript"">

function AutoSize()

    {

            var container = document.getElementById("container");

            var elements = container.getElementsByTagName("div");

            var length = 0;

            for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) 

            {

                    var element = elements[elementIndex];

                    length = length + element.offsetWidth;

                }

                container.style.setAttribute("Width", length,false);

    }

</script>

So haste auch keine Tabellen

Hallo,

nach ewigem Suchen bin ich hier auf das Script gestoßen bzgl. Breite auslesen. Da mir JS-Programmierung nicht unbedingt liegt, hab ich versucht, das ganze auf mein Layout umzusetzen...
Hab im CSS die Breite vom umschließenden DIV auskommentiert und wollte dann mit Hilfe dieses Scriptes die Breite einstellen lassen.
Nur leider klappts nicht. Habe den DivId entsprechend vom Namen her auf meinen DIV umbenannt und am Ende der Funktion, bzw bei <body onload einen alert(length); eingefügt. Der zeigt mir allerdings 0 an... :(

Ne Idee, worans noch liegen kann?

Danke schonmal vorab