div elemente nebeneinander

Hallo,

irgendwie bekomme ich diese einfach Aufgabe nicht hin. Ich will 3 div Bereich nebeneinander haben. links und rechts habe eine feste breite und die mitte ist je nach seitengrösse dynamisch.

so habe ich es versucht:

[CODE]
/*
Basis-Stylesheet
*/

p { color:black;font-size:14px; font-weight:bold; }
#section1 {float:left; position: relative; width:90px;}
#section2 { float:left;width:72%;position: relative; }
#section3 { float:left; width:210px;position: absolute; margin.left:20px}

[/CODE]

Bisher habe ich geschummelt, deswegen passt es ganz gut aber wenn der bildschrim zu groß wird, dann entsteht ein grosser Abstand zwichen section 3 und dem aussenrand des Browsers.

Habt ihr einen Tipp?
Ich habe schon vieles versucht aber an irgendeiner Stelle hakt es bei mir…

lg

Lara

Das geht auch nicht mit absoluter Positionierung. Dafür reicht floaten alleine schon aus.

#links { float: left;width: 200px; } #rechts { float: right;width: 200px; }

[html]

links

rechts
mitte braucht keine css-angaben
[/html]

Tipp: die Frage wurde auch schon mehrfach im Forum gestellt :wink:

Hallo,

danke für die Hilfe…ja ich habe auch Beispiele gefunden…und genau wie du es jetzt definierst hast sind alle 3 div bereiche untereinander statt nebeneinander. Kannst du da nochmal schauen?

gruss

lara

Ich würde das so lösen:

CSS

.main {
    width: 600px;
    height: 100%;
    display: inline-block;
}

.links_rechts {
    width: 200px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    background-color: blue;    
}

.mitte {
    width: 200px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    background-color: magenta;    
}

HTML
[HTML]

<div class="main">
    <div class="links_rechts">Links</div><div class="mitte">Mitte</div><div class="links_rechts">Rechts</div>
</div>

[/HTML]

Das Geheimnis liegt in der Reihenfolge des HTML-Codes. Erst die beiden gefloateten Elemente, dann das was in der Mitte stehen soll. Schau dir mal genau an, was Du geschrieben hast und was ich formuliert habe.

hallo threadi,

danke für deine Hilfe…im Teufel liegt im Detail. Die Reihenfolge hatte ich nicht beachtet. Trotzdem, wenn ich den linkten und rechten Bereich so zuerst floate, dann ist der mittlere Bereich nicht zwischen den beiden sondern unter dem linken und rechten bereich. Woran kann dies liegen?

LG

Lara

Es wäre gut, wenn du deinen Code (oder noch besser ein reduziertes Beispiel) dazu zeigen könntest.

Probier mal dem Mittelteil dieses Attribut zu geben #mitte { display: inline-block; }
dann sollte er in der Mitte bleiben. Solange eben bis der Bildschirm so schmal wird bis die 200px links und 200px rechts erreicht sind, dann wird der Mittelteil logischerweise in die nächste Zeile geschrieben.
LG
Gery

<html>
<head>
<title></title>
<style type="text/css">
#links { float: left;width: 200px; }
#rechts { float: right;width: 200px; }
#mitte { display: inline-block; }
</style>
</head>
<body>
<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="mitte">mitte braucht keine css-angaben</div>
</body>
</html>

Hi,

all meine Aussagen beziehen sich auf den zweiten Betrag von threadi…mein Beispiel ist im ersten Beitrag…

Gruss

Wie schon gesagt wurde: zeig mal den Code den Du verwendest.