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å.
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>
.