✔ Floating Problem

DeniseLechner

DeniseLechner

Grünschnabel
Hallo Ihr Lieben.

Ich fall es einfach nicht, ich scheitere schon wieder am Floating
Im Grunde will ich einfach nur ein 3 Spaltiges Layout das in etwa so aussieht:

website.png


Bei Mir hab ich jedoch das Problem, das der Container (der um die drei Spalten liegt) nur maximal so groß ist, wie #main.

(Habe den Inhalt herausgenommen, um den Beitrag nicht unnötig lange zu machen)

index.php:
HTML: 
<div id="cont">
   <div id="l-m"></div>
   <div id="main"></div>
   <div id="r-m"></div>
   <div id="footer"></div>
</div>

style.css:
Code: 
#cont{width: 300px;background-color:lime}
#l-m{width:100px; float:left;background-color:red}
#main{width:100px;float:left;background-color:green}
#r-m{width:100px;float:right;background-color:blue}
#footer{clear:both}

dankee
 
Bin die ganze Nacht daran gesessen, und konnte das Problem nicht lösen :(

index.php:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/traditionalsa.dtd">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
		<link rel="apple-touch-icon" href="iphone-icon.png"/>
		
		<script language="javascript" src="js/functions.js"></script>
	</head>
	<body>
	
		<div id="header_border">
			<div id="header_img"></div>
		</div>
	
	<div id="main">
		<div id="content_border">
			<div id="content">
				<div id="c_left">
				
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				</div><!-- END c_left -->
				
				<div id="c_main">
				
					<div class="content_top1"></div>
					<div class="content_top2">
						<span class="content_headline">Wir sind bald online!
						<span class="content_dateline"><br />13.Dez.2009</span>
						</span>
					</div>
					<div class="content_main">
						<div class="content_">
						<h2>Hallo Welt</h2>
						<p>Hallo Ihr Lieben! Ja, es ist wahr... Wir sind bald online. </p>
						</div>
					</div>
					<div class="content_end1"></div>
					
				</div><!-- END c_main -->
				<div id="c_right">
				
				
				</div><!-- END c_right -->
				
				

			</div><!-- END content -->
			<div id="cleaner"></div>
			
			<div id="footer">
				Kontakt | Impressum<br /><br />
			
			</div>
						
		</div><!-- END content_border -->
	</div><!-- END main -->
	
	</body>
</html>

style.css:
Code: 
body{background-color: black; margin: 0; padding: 0; height: 100%}

#main{width: 1100px; margin: auto}
#header_border{width: 1100px; height: 600px; background: transparent url(../images/header_border.png) no-repeat; margin: auto}
#header_img{width: 990px; height: 510px; background: black url(../images/header/header_5.jpg) no-repeat; position: relative; top: 90px; left:55px}


#content_border{width: 1100px; margin: auto; background: transparent url(../images/content.png) repeat-y}
#content{width: 990px; margin: auto}


#c_left{width: 160px; height: 20px; float: left}
#c_right{width: 160px; height: 20px; float: left}
#c_main{width: 670px; float: left}
#footer{width: 990px; font-size: 10px; color: #555; text-align: center; margin-top: 50px; margin-left:55px; clear: both}

#cleaner{width: 990px; height: 1px; clear: both}

.content_top1{width: 690px; height: 14px; background: transparent no-repeat url(../images/content/content_01.png)}
.content_top2{width: 690px; height: 45px; background: transparent no-repeat url(../images/content/content_02.png)}
.content_main{width: 690px; background: transparent repeat-y url(../images/content/content_03.png)}
.content_end1{width: 690px; height: 30px; background: transparent no-repeat url(../images/content/content_04.png)}

.content_{width: 580px; margin: auto}


h1,h2,h3,h4,h5,h6{margin: 0; padding: 0; line-height: 2}
p{margin: 0; padding: 0; line-height: 1.4}

.content_headline{position: relative; top: 5px; left: 95px; font-weight: bold; font-size: 15px; float: left}
.content_dateline{position: relative; top: -3px; left: 0px; font-weight: bold; font-size: 10px}

.navigation_head{font-size: 14px; color: white}
.navigation_link{font-size: 12px; color: white}

ul{color: white; list-style-type: none}
.hauptklasse{font-size: 13px; font-weight: bold; margin-left: 0px}
.subklasse{font-size: 11px; margin-left: 10px}
 
In dieser Code-Variante liegt es an den height:20px-Deklarationen für die beiden äußeren Spaltenblöcke #c_left und #c_right, die von den standardkonformen Browsern als absolute Höhe interpretiert wird, und somit das Gesamtlayout in der Höhe nicht mitwachsen lassen, wenn darin der Inhalt die vorgegebene Höhe überschreitet.

Wenn du hier eine Mindesthöhe vorsehen möchtest, nutze stattdessen min-height.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück