nicht angemeldet
3 Divs nebeneinander / Feste + Variable Größe
Hi,
ich möchte 3 Divs nebeneinander packen. Die Divs sollen in einem Container liegen und die 2 äußeren Divs sollen feste breiten haben. Der innere div soll nur so breit werden wie möglich.
Mit Tabellen wäre das einfach, aber wie bekomme ich das mit css und divs hin?
<html>
<head>
<title>Bla</title>
</head>
<body style="background-color: #000000;">
<div align="center">
<div style="width: 500px; background-color: #ffffff; height: 200px;">
<div style="width: 100px; background-color: #FF0000; float: left;">a</div>
<div style="background-color: #00FF00;">b</div>
<div style="width: 100px; background-color: #0000FF; float: right;">c</div>
</div>
</div>
</body>
</html>
Die Besonderheit ist eben, dass der Container eine relative Größe haben soll / je nach Inhalt unterschiedlich groß werden soll, weswegen in den mittleren div nicht absolut angeben möchte.
Ein möglicher Weg wäre natürlich die Breite des Divs in JS zu berechnen und dann zuzuweisen.
-
Hi,
ich möchte 3 Divs nebeneinander packen. Die Divs sollen in einem Container liegen und die 2 äußeren Divs sollen feste breiten haben. Der innere div soll nur so breit werden wie möglich.
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Danke für die Antwort.
Ich musste also nur die Reihenfolge der divs vertauschen.
Nun habe ich noch das Problem, dass der Container nicht größer als notwendig, der header 100% der Breite des Containers einnimmt und der Container dann in die breite wächst, wenn es der Inhalt des contents das notwendig macht.
<html> <head> <title>Bla</title> </head> <body style="background-color: #000000;"> <div align="center"> <div style="min-width: 300px; background-color: #ffffff; height: 200px;"> <div id="header" style="width: 100%"> <div style="width: 100px; background-color: #FF0000; float: left;">a</div> <div style="width: 100px; background-color: #0000FF; float: right;">c</div> <div style="background-color: #00FF00;">b</div> </div> <div id="content"> <div style="width: 500px;"> </div> </div> </div> </body> </html>Da würde ich also einen container mit 500px breite erwarten, wäre der Content:
<div id="content"> <div style="width: 100px;"> </div>Würde ich gerne einen Container von 300px (wegen der min-width) haben.
Geht das auch?
-