Har utan problem fått de tre inre DIV:arna att lägga sig bredvid varandra, men att få den mellersta att centreras i förhållande till den yttre DIV:en verkar klurigt. Det kan tilläggas att de inre DIV:arnas sammanlagda bredd är mindre än den yttres. Har någon här ett förslag kanske?
Ingen av de inre DIV:arna har fast bredd, så att använda absolut positionering är nog inte så bra i det här fallet. Den DIV som sitter i mitten ska inte påverkas utav varken den vänstra eller den högra, utan ska alltid vara horisontellt centrerad i förhållande till den yttre DIV:en oavsett om de andra två har samma bredd eller inte. Med andra ord vill jag att alla de inre DIV:arna ska positioneras i förhållande till den yttre DIV:en trots att de ligger bredvid varandra. Frågan är bara om det går att göra så. :l
Hur tänker du dig bredderna?
Tänker du dig t.ex. den att vänstras bredd skall kunna vara X% av containerbredden och den högras Y% samtidigt som den centrerade i mitten tar upp "max resten" ?
Hur tänker du dig bredderna?
Tänker du dig t.ex. den att vänstras bredd skall kunna vara X% av containerbredden och den högras Y% samtidigt som den centrerade i mitten tar upp "max resten" ?
Ja, det kan man nog säga. Men DIV:arna kommer inte att ta upp hela containerbredden då de inte är bredare än vad deras innehåll kräver. Därför kommer den centrerade DIV:en att ha en del fritt utrymme till vänster och höger om sig.
... och det skall bara vara exakt de fyra divvar du har med i exemplet?
... och ingen av den har någon bredd som relaterar till något annat än sitt innehåll?
... och det skall bara vara exakt de fyra divvar du har med i exemplet?
... och ingen av den har någon bredd som relaterar till något annat än sitt innehåll?
Ja, fyra DIV:ar är i alla fall vad jag tänkt. Jag var nog lite otydlig tidigare, men containern har en fast bredd.
OK - då kör vi utefter det jag tror mig förstå av det du beskriver att du vill ha :).
<doctype html>
<meta charset="UTF-8">
<html>
<head>
<title>Ett av jarvklos exempel</title>
</head>
<body>
<h1>Variant 1 - Tabellmetoden</h1>
<div>En tabell har den egenskapen att den ges "auto"-bredd efter sitt innehåll</div>
<div>Kombinera det med centrering av tabellen på sidan med <table align="center"%gt;</div>
<div>(dvs använd den tabell-egenskap för centrering av hela klabbet som inte har motsvarighet i CSS såvitt jag vet)</div>
<div>med absolutpositionering av vänster- och höger-tabeller och problemet är löst (dock inte som du vill ha det kodmässigt)</div>
<div style="position: relative; width: 800px; border: 1px solid black;">
<table border="1" style="position: absolute; left:0; top:0;"><tr><td><div>vänster</div></td></tr></table>
<table align="center" border="1"><tr><td><div>centrerad</div></td></tr></table>
<table border="1" style="position: absolute; top: 0; right: 0;"><tr><td><div>höger</div></td></tr></table>
</div>
<hr>
<h1>Variant 2 - CSS metoden</h1>
<div> Som du vill ha det, men tyvärr ej fungerande i MSIE<8</div>
<div style="position: relative; width: 800px; border: 1px solid black;">
<div style="position: absolute; left:0; top:0; width: auto; border: 1px solid blue">vänster</div>
<div style="display: table; width: auto; margin: auto; border: 1px solid blue">centrerad</div>
<div style="position: absolute; right:0; top:0; width: auto; border: 1px solid blue">höger</div>
</div>
<hr>
<h1>Hybridvariant</h1>
<div>Hopslagnng av de tu...</div>
<div style="position: relative; width: 800px; border: 1px solid black;">
<div style="position: absolute; left:0; top:0; width: auto; border: 1px solid blue">vänster</div>
<table align="center" border="1"><tr><td><div>centrerad</div></td></tr></table>
<div style="position: absolute; right:0; top:0; width: auto; border: 1px solid blue">höger</div>
</body>
</html>
