dunkerbeck: inline-block und 100% Breite

SELF-Forum

inline-block und 100% Breite

dunkerbeck
– Informationen zu den Bewertungsregeln

Moin moin,

ich muss ein vertikal und horizontal zentriertes Layout umsetzten. Höhe und Breite sind dynamisch.
Innerhalb der zentrierten Box sollen mehrere Tabellen angeordnet werden und diese sollen alle genauso breit wie die Box sein.
Die Box wird über eine Layouttabelle (ich weiß daß das böse ist wird auch noch durch display:table ersetzt) zentriert und hat display:inline-block als Eigenschaft. Das funktioniert so weit 1a nur leider dehnt der IE die Box auf die gesamte Breite aus, wenn in ihr irgendetwas eine Breite von 100% zugewiesen bekommt.

Ich habe bis jetzt leider noch keine Lösung gefunden und hoffe daß ihr mir weiter helfen könnt.

Gruß Daniel

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
	<style type="text/css">  
		html,body{  
			height:100%;	  
		}  
		.asd {  
			display:-moz-inline-stack;  
			display:inline-block;  
			zoom:1;  
			*display:inline;  
			border:1px solid red;  
			position:relative;  
			text-align:left;  
		}  
		#dd {  
			width:50px;height:50px;  
			background-color:#f00;  
			position:absolute;  
			top:-50px;  
			left:-50px;  
		}  
		table.ttt {  
			width:100%;  
		}  
		table.ttt td {  
			text-align:center;  
			vertical-align:bottom;  
			padding:3px;  
		}  
		table.lay {  
			height:100%;width:100%;  
		}  
		td.lay {  
			vertical-align:middle;  
			text-align:center;  
		}  
	</style>  
</head><body>  
<table class="lay">  
	<tr>  
		 <td class="lay">  
		 <div class="asd">  
		 	<div id="dd">  
		 	dd  
		 	</div>  
			<table class="ttt" cellpadding="0" cellspacing="0">  
				<tr>  
					<td><a href="#"><img src="img/img11.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img26.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img11.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img11.jpg" alt=""/></a></td>  
				</tr>  
			</table>  
			<table class="ttt" cellpadding="0" cellspacing="0">  
				<tr>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img11.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img26.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
					<td><a href="#"><img src="img/img01.jpg" alt=""/></a></td>  
				</tr>  
			</table>  
		</div>  
		</td>  
	</tr>  
</table>  
  
  
  
</body></html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. inline-block und 100% Breite

    dunkerbeck
    – Informationen zu den Bewertungsregeln

    Ich nochmal.
    Mein erster Beitrag war nicht ganz korrekt. Der IE setzt nur Tabellen auf die volle Fensterbreite. Bei einem Div wird width:100% ignoriert.

    Zentriere inzwischen nach folgender Methode aber das ändert leider gar nichts.
    http://www.brunildo.org/test/shrink_center_4.html

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln