Box wird nicht gestreckt @ tutorials.de: Tutorials, Forum & Hilfe

antichecker · 02.08.10 21:12

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-Code:

<!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>

spicelab · 02.08.10 21:33

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-Code:

<div id="content-left">left</div>                                           
<div id="content-right">right</div>
<div id="content-middle">middle</div>

Code css:

#content-middle 
            {               
              margin:0 200px;
              width:auto;             
              border:1px solid black;             
            }

antichecker · 03.08.10 18:46

Ok,
also richten sich die 200px an der Übergeordneten Box aus?
Aber warum middle und right vertauschen?

spicelab · 03.08.10 19:07

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Netbeans kann Projekt nicht öffnen / Projektordner wird nicht erkannt

Flash CS 3 @ Zeichen in Mozilla (nicht Firefox) wird nicht gemacht

AJAX funktioniert nicht richtig, readysate funktion wird nicht ausgeführt

[CSS] Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt?

Will nicht voten... vote wird nicht gespeichert... (kein msql)

E-Mail:

Abonnieren Abbestellen