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

3 Divs nebeneinander

Status
Für weitere Antworten geschlossen.
S

Stifemeister

Neues Mitglied
Hallo ich bin gerade mir das Layouten mit Tabellen abzugewöhnen und mit div und CSS zu arbeiten. Jetzt hab ich aber eine Frage und zwar wie bekomme ich es hin 3 Divs nebeneinander zu haben, und zwar so das das Linke und Rechte feste breiten haben und das in der Mitte den restlichen Platz einnimmt (variabel).
Ich habs schon mit vielen Seiten und Forum probiert und finde einfach keine Antwort. Wäre echt super wenn mir da jemand helfen könnte.
 
Was wichtiges vorab: Von Tabellen auf div umsteigen ist nicht ganz der richtige Weg. Du solltest schon direkt so umsteigen, dass du nicht die Tabelle durch divs austauschst, sondern sinnvoll auszeichnest (Überschriften sind keine divs, Text steht nicht direkt in divs, die Navigation braucht kein div usw.).

Zu deinem Problem:
Die linke Spalte bekommt float: left; und eine feste Breite, die rechte Spalte float: right; und eine feste Breite. Die mittlere Spalte bekommt gar keine Breite, aber margin-left: *Breite der linken Spalte*; und margin-right: *Breite der rechten Spalte*;.
Das sollte keine Probleme bereiten.
 
Es funktioniert fast und zwar ist meine rechte Spalte zwar rechts aber unterhalt der mittleren.

Quellcode:

style.css
#links {
width: 12em;
float: left;
}

#mitte {
margin-left: 12em;
margin-right: 12em;
}

#rechts {
width: 12em;
float: right;
}


index.php

<html>
<head>
<title>TEST</title>
<style type="text/css">
<!--
@import url(./style.css);
-->
</style>
</head>
<body>

<div id = "links">
links
</div>

<div id = "mitte">
mitte
</div>

<div id = "rechts">
rechts
</div>

</body>
</html>
 
Die Methode soll sich zu Nutze machen, daß Elemente unter floats deren Höhe nicht berücksichtigen.
#rechts steht aber unter einem ungefloateten Element. Der float beginnt also unter #mitte.
Wenn du #mitte im html als letztes notierst beginnt der float von #rechts ganz oben:
Code: 
<div id = "links">
links
</div>

<div id = "rechts">
rechts
</div>

<div id = "mitte">
mitte
</div>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben