Box wird nicht gestreckt

antichecker

Mitglied
Hallo zusammen,

ich habe Probleme mit der Box "content-middle", ich finde keine Lösung zur Streckung der Box, sie passt sich nur dem Inhalt an, soll aber die gesamte Breite zwischen der linken und rechten Box ohne inhaltliche orientierung nutzen. Da mit min- und max-width gearbeiten wird kommt also margin z.B. schon mal nicht in frage (sofern ich das richtig beurteile). Verwende ich die 100% wird die recht Box in die nächste Zeile verschoben. Wo liegt der Fehler / die Lösung?


HTML:
<!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">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		
        
        <style type="text/css">	
			
			#menu, #header, #content, #footer
			{
	    	          min-width:800px;
			  max-width:1200px;
			  border:1px solid black;
			  margin: 0 auto;
			}	
						
			#content-left 
			{			  
			  width:200px;
			  float:left; 
			  border:1px solid black;			  
			}
			
			#content-middle 
			{			  	
			  float:left;
			  width:auto;			  
			  border:1px solid black;			  
			}			
			
			#content-right 
			{			  
			  width:200px;
			  float:right;
			  border:1px solid black;			  
			}
			
			.clearing 
			{ 
			  clear: both; 
			}		
			
		</style>
         
	</head>

	<body>  

		<div id="menu">menu
    	       </div>       

		<div id="header">header
   		</div>        
                           
    	<div id="content">
        	
            <div id="content-left">left
    		</div>            
                                 
            <div id="content-middle">middle
    		</div>   
                         
            <div id="content-right">right
    		</div>
            
            <div class="clearing"></div> 
                      
    	</div>  
    
    	<div id="footer">footer
    	</div>
            
	</body>
    
</html>
 
Warum sollte hier margin nicht in Frage kommen?

Alles nur eine Frage der Block-Reihenfolge im HTML-Code, damit der mittlere Spaltenblock die Äußeren gemäß ihrer float-Eigenschaften umfließt.

HTML:
<div id="content-left">left</div>                                           
<div id="content-right">right</div>
<div id="content-middle">middle</div>
CSS:
#content-middle 
			{			  	
			  margin:0 200px;
			  width:auto;			  
			  border:1px solid black;			  
			}
 
Zuletzt bearbeitet:
Der linke und rechte Außenabstand für den mittleren Block entspricht deiner linken u. rechten Spaltenbreite, und bewirkt, dass das Restmaß an Breite im Anzeigebereich ausgefüllt wird.

Warum die Reihenfolge vertauschen? Das zu umfliessende Element (= mit float-Eigenschaft formatiert) wird im HTML-Code grundsätzlich vor dem umfliessenden Element genannt.
 
Zuletzt bearbeitet:
Zurück