✔ DIV-Elemente nebeneinander anordnen

[brunlorenz]

Hallo, ich bin daran, eine Website zu designen.
Dabei bin ich auf ein Problem gestossen:
Wenn ich rechts zwei DIV-Elemente habe,
ist das Linke nach unten verschoben. In der Zeichnung zeigt der Pfeil dorthin, wo ich es eigentlich gerne hätte.

.newsletter { background-image: url(images/gradient.svg); background-repeat: repeat-y; text-align: center; color: black; font-size: 12px; margin-left: 85%; margin-top: 20px; height: 100px; width: 15%;  border-width:1px; border-style:solid; border-color:black; }
.searchbox { background-image: url(images/gradient.svg); background-repeat: repeat-y; text-align: center; color: black; font-size: 12px; margin-left: 85%; margin-top: 20px; height: 75px; width: 15%;  border-width:1px; border-style:solid; border-color:black; }
.news { float: left; display: inline; background-image: url(images/gradient.svg); background-repeat: repeat-y; text-align: center; color: black; font-size: 12px; margin-left: 1%; margin-top: 10px; height: 300px; width: 15%;  border-width: 1px; border-style:solid; border-color:black; }

Problemkind ist .news, aber ich gab euch allen wichtigen Code, damit ihr sehen könnt, wenn es von den anderen abhängt.

Wiso wird .news nicht auf der linken Bildschirmseite neben den Elementen rechts angezeigt sondern untendran?

Ich danke für jede Hilfe.
lorenzbrun

 

[dreifragezeichen]

Da dein HTML-Code nicht vorliegt, tippe ich mal, dass du darin die drei Blöcke in der o.g. Reihenfolge deines CSS-Codes aufrufst.

Das zu umfliessende Element (mit float formatiert) wird aber immer an erster Stelle genannt, ansonsten führt es zu seinem Umbruch, und es wird im Viewport an der vertikalen Position fortgesetzt, wo das untere der beiden benachbarten Elemente endet.

 

[brunlorenz]

Ich habe den Fehler gefunden: die Position war auf Relative (sonst im Code)

 

[tuwamje]

Hallo...
Versuch es einfach mit folgenden:
mit einer Tabelle und dann kannst Du die tags <top></top> wählen.
1. <table border="0" bordercolor="#123456" ... valign="top">...</table>
2. oder dort <tr><td valign="top">...</td></tr>
oder 3. Table -Atribute setzen für Tabele und dann so: <top>Inhalt</top>

Letztere Variante ist aber sehr umständlich weil Du dann mit jedem neuen Abschnitt die Atribute neu setzen musst damit die Optik der Pageseite stimmt.
Ich empfehle fast immer die Variablen "valign" in das einleitende Tag von TD zu setzen. Es geht auch das einbringen dieser Variablen direkt in den Table-Tag zu bringen. Dann ist die gesamte Tabelle so...