• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div elemente nebeneinander

M

musclebreast

Mitglied
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: 
<style type="text/css">
/*
  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}  

  
  </style>
 
<div id="section1">

</div>

<div id="section2">

</div>

<div id="section3">

</div>

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
 
Werbung:
Das geht auch nicht mit absoluter Positionierung. Dafür reicht floaten alleine schon aus.

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

HTML: 
<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="mitte">mitte braucht keine css-angaben</div>

Tipp: die Frage wurde auch schon mehrfach im Forum gestellt ;)
 
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
 
Werbung:
Ich würde das so lösen:


CSS
Code: 
.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>
 
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
 
Werbung:
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

Code: 
<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>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben