CSS Centreringsproblem

Jag har stora problem att få saker att centrera som jag vill.

Jag vill ha tre lager som ligger på rad (alltså float: left), deras bredder ska anpassas efter deras innehåll. Sedan vill jag få dessa tre att centreras på sidan vilket jag inte lyckas med. Jag har provat att lägga dem i ett nytt lager med margin: auto o.s.v. men det nya, "yttre", lagret blir maximalt brett så då ger inte centrering någon effekt.

Någon som har en bra lösning på detta? Står helt still i min hjärna idag.

Funkar det inte på det "gamla vanliga sättet" vad gäller centrering genom CSS?

Med typ följande i stilmallen:

body
{
margin: 3%;
padding: 0;
text-align: center;
background: #707070;
}

#container
{
width: 800px;
background: #707070;
margin-right: auto;
margin-left: auto;
text-align: left;
}

Och sedan lägger du dina "float: left"-lager inne i "container"-lagret. Men det låter ju nästan som att det är så du har gjort så i så fall vet jag inte var felet ligger.

Felet ligger i att din #container har en bredd på 800px, det är det jag vill slippa, nu blir det inte sakerna som ligger där i som centreras utan containern och den är 800 pixlar bred, om inte det som ligger i den också är 800px så kommer det inte bli centrerat. Tyvärr :(

OK som jag förstår så vill du inte vara låst av några fasta mått överhuvudtaget vad gäller bredden på lagren. Ja då blir det nog knepigare. Har i alla fall inga idéer om hur det skulle kunna fixas just nu.

Okej, om jag låter högra och vänstra lagret få en fast bredd då? Kan man göra något med relativa positioner?

Det jag vill ha i mitten är egentligen en bild och sedan vill jag ha text på höger och vänster sida om den. Jag vet inte hur bred bilden är.

Jag försökte med något i den här stilen:

         img {
            display: block;
            margin: auto;
            width: 400px;
         }
        
         #left {
            position: relative;
            width: 200px;
            left: -200px;
            border: 1px solid #f00;
         }

         #right {
            position: relative;
            width: 200px;
            left: 100%;
            border: 1px solid #f00;
         }

med denna html:

<img src="bild.gif"><div id="left">vänster</div><div id="right">höger</div></img>

Men det fungerade inget vidare, dessutom blev det helt olika resultat i firefox och ie.