Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.02.2010, 14:36
maclady maclady ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard Wrapper wächst nicht mit, keine Floats

Hallo,

ich möchte, daß die eigentlichen DIVs von einem Container umschlossen werden. Sonst habe ich mit floats gearbeitet und ein clearendes Element nach den Hauptdivs genutzt, damit der Container mitwächst.

Diesmal ist das Design aber etwas verschachtelt, daher habe ich die DIVs positioniert. Nun wächst aber der umschliessende Container nicht mehr mit.

Irgendwie stehe ich auf dem Schlauch...


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link href="sytle.css" rel="stylesheet" type="text/css" />
</head>
 	<body>
		<div id="container">
  			<div id="wrapper">	
				<div id="logo">Tolles Logo
				</div>	
                <div id="top">Tolles Menü
				</div>
                <div id="right">
				</div>
                <div id="left">Tolles Menü
				</div>
                <div id="flex">Tolles Bild				</div>
                <div id="lang">
				</div>	
				<div id="main">Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text </div>
			</div>	
  		</div>	
 	</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */

html{
	min-height: 101%;
}

table {
        border-spacing: 0px;
}

td {
        margin: 0px;
        padding: 0px;
}

tr {
        margin: 0px;
        padding: 0px;
}

img {
        border: 0px;
        margin: 0px;
        padding: 0px;
}

address {
        font-style: normal;
        color: #ff4400;
}

.readon {
        margin: 0 0  0 15px;
        font-size: 7pt;
        text-transform : uppercase;
}

body{
	font-size: 12px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        margin: 0px;
        padding: 0px;
}

#container{
	width: 832px;
	margin: 0 auto;
	margin-top: 0px;
	background-color: #33FF00;
}

#wrapper {
	width: 816px;
	margin: 0 auto;
	margin-top: 0px;
	background-color: #fbe7c5;
	position: relative;
	top: 0px;
	left: auto;
}

#logo{
	width: 253px;
	height: 184px;
    padding: 0px;
    margin: 0px;
	background: #663300;
	border-bottom: 10px solid #8c6640;
	position: relative;
}

#top{
	width: 514px;
	height: 174px;
	padding: 0px;
	margin: 0px;
	background: #663300;
	position: absolute;
	top: 0px;
	left: 253px;
}

#right{
	width: 49px;
	height: 184px;
    	padding: 0px;
    	margin: 0px;
	background: #663300;
	position: absolute;
	top: 0px;
	right: 0px;
	border-bottom: 10px solid #8c6640;
}

#left{
	width: 253px;
	height: 326px;
    	padding: 0px;
    	margin: 0px;
	background: #fbe7c5;
	position:absolute;
	top: 194px;
	left: 0px;
	border-bottom: 10px solid #990000;
		
}

#flex{
	width: 514px;
	height: 356px;
	padding: 0px;
	margin: 0px;
	background: #ffffff;
	position: absolute;
	top: 174px;
	left: 253px;
}

#flex img {
        border: 0px;
        margin: 0px;
        padding: 10px;
}


#lang{	
	width: 49px;
	height: 326px;
    	padding: 0px;
    	margin: 0px;
	background: #fbe7c5;
	position: absolute;
	top: 194px;
	right: 0px;
	border-bottom: 10px solid #990000;

		
}	

#main {
	width: 816px;
    	padding: 0px;
    	margin: 0px;
	background: #990000;
	position: absolute;
	top: 530px;
	left: 0px;
        color: #ffffff;
}
Mit Zitat antworten
Sponsored Links