divs links und rechts vergrößern sich nicht automatisch mit

[skywalkerluk]

Hallo zusammen,

ich habe ein Problem mit einem CSS Layout.

Ich habe ein div =MAIN, dass mit einem Rahmen ausgestattet werden soll.

also benötige ich die divs= kopf, links, rechts und unten. (siehe bild)
leider vergrößern sich die divs links und rechts nicht mit dem Inhalt des mittleren divs =main-aktion

Warum?

Hier Bild und Code:

Bild: http://www.otipp.de/problem.jpg

#main{
float:right;
width:723px;
background-color:#FF0000;
}

#main_kopf{
text-align:center;
height:30px;
background-color:#eeeeee;
}
#main_links{
float:left;
width:20px;
background-color:#CCCCCC;
}
#main_rechts{
float:right;
width:20px;
background-color:#CCCCCC;
}
#main_aktion{
text-align:center;
margin: 0 20px 0 20px;
width:683px;
background-color:#ffffff;
}
#main_fuss{
text-align:center;
height:30px;

vielen Dank vorab für eure Hilfe.
LUK

 

[Maik]

Hi,

bei einem Layout mit fixen Breiten bietet sich hier die Faux-Columns-Technik an.

Weitere technische Möglichkeiten, um sog. "Equal-Height-Columns" zu erzeugen, kannst du dem Artikel AnyColumnLongest entnehmen.

mfg Maik

 

[skywalkerluk]

Vielen Dank für die schnelle Antwort,
aber ich verstehe diese Methode nicht so richtig.

gib es nicht einfach einen Befehl, wie z.B. width:100% und dann sind dich immer automatisch so groß wie sie sein sollen?

Luk

 

[Maik]

Diese Methode nutzt eine Grafik, in der die einzelnen Spaltenhintergründe eingearbeitet sind, und die im Elternelement (bei dir #main) als Hintergrundbild vertikal wiederholt wird.

Ich hab hier ein wenig Anschauungsmaterial für dich, in dem ich diese Technik genutzt habe

• Zentriertes Layout mit drei Spalten
• CSS-Layout mit 100%-Höhe

mfg Maik

 

[Maik]

http://alistapart.byteshift.de/fauxcolumns (deutsche Übersetzung)

mfg Maik