✔ Floating von 3 Spalten

Status
Nicht offen für weitere Antworten.
Steffen Giers

Steffen Giers

Erfahrenes Mitglied
Servus,

ich benötige mal etwas hilfe.

Ich habe 3 Spalten die mit float:left nebeneinander angeordnet sind. Das funktioniert auch wunderbar. Das eigentliche Problem liegt darin, dass diese Spalten trotz height:100%; um die Höhe des <div id="head"> über den sichtbaren Bereich hinausragen. Ich kapier aber nicht warum das so ist.

Zum besseren Verständnis hier der Link:
http://www.touchedwork.de/test/index1.html

CSS-File
Code: 
     /* 
     *
     * @author	 Steffen Giers <steffengiers@yahoo.de>
     * @copyright  2005 touchedwork.de
     * @version	1.0
     * @since	  File available since Release 1.0
     */
    
    * {margin:0;padding:0}
    img {border:0}
    li,ul {list-style:none}
    
    html, body {
    height:100%;
    background:#585756;
    color:#fff;
    font-family:"Lucida Grande",Tahoma, Arial, sans-serif;
    font-size:11px;
    line-height:1.4em;
    }
    
    #primarycontent {
    height:100%;
    width:800px;
    }
    
    .content {
    float:left;
    height:100%;
    width:260px;
    }
    
    #col_1 {
    border-right: 1px solid;
    }
    
    #col_2 {
    border-right: 1px solid;
    }
    
    #col_3 {}
    
    #bottom {
    clear:left;
    }

HTML-File
HTML: 
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    	<head>
    		<title>Touchedwork</title>
 		<link rel="stylesheet" href="css/style1.css" type="text/css" media="all" />
    	</head>
    	
    	<body>
    		<div id="primarycontent">
    			<div id="head">
    				<ul id="nav">
 					<li>Home</li>
 					<li>About</li>
 					<li>Portfolio</li>
 					<li>Contact</li>
    				</ul>
    			</div>
    			
    			<div class="content" id="col_1">
 				<h2>Recent News</h2>
    			</div>
    			
    			<div class="content" id="col_2">
 				<h2>Latest Work</h2>
    			</div>
    			
    			<div class="content" id="col_3">
    				<h2>Archiv</h2>
    			</div>
    			<div id="bottom"></div> 
    		</div>
    	</body>
    </html>

Danke für eure Hilfe!
 
Zuletzt bearbeitet:
Ich kapier aber nicht warum das so ist.
Zum Vergrößern anklicken....
Der Abstand / die Höhe zwischen der unteren Elementgrenze DIV#head und dem unteren Browserfensterrand bzw. der unteren Elementgrenze DIV#primarycontent beträgt nicht 100%, sondern das vertikale Restmaß des Viewports, also 100% - Elementhöhe (DIV#head).
 
Hm, klingt auch igendwie logisch. Danke Dir...

Hast du eine Idee wie ich es lösen könnte das die Ränder bis zum Ende des Viewports reichen? Die Ränder sollen bis zum Ende reichen wenn der Inhalt in den Viewport passt. Falls der Inhalt über den Viewport hinaus ragt soll natürlich der Scrollbar zu nutzen sein.


Bye
 
Probier doch mal folgendes:

Code: 
#primarycontent {
height: 100%;
width: 800px;
}

div#head
{
height: 10%;
}

.content {
float: left;
height: 90%;
width: 260px;
}
 
Danke, das war eine gute Idee. Ich habe um die 3 spalten einen weiteren Container gemacht der Height 100% bekommen hat. Den Header habe ich auf eine feste Höhe von 300px gesetzt. Der zugefügte Container streckt sich nun vom unteren Rand des Head bis zum Ende des Viewports (ich liebe dieses Wort ;)) Die Linien die eine optische Trennung hervorrufen sollen habe ich durch ein Background image anstelle eines Borders gemacht.

Danke Dir nochmal...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück