Wrapper und auch weiterer DIV umschließt den Inhalt nicht

**toto3007** · 13.06.2012, 14:08

Hallo alle miteinander,
vorab: Ich bin neu hier. Ich habe auch schon alles durchsucht und ähnliche Probleme gefunden. Doch keine Lösung für mein Problem. Wahrscheinlich bin ich irgendwo blind...

Zuallererst zum Anschauen: http://www.eyeevent.de/hirschgarten/index.html
Das Problem werden alle sofort sehen: Das umschließende DIV umschließt nicht komplett. Am Ende werden in das umschließende DIV "Wrapper" noch ein DIV eingefügt namens "Content", welches wiederum zwei DIVs "linke_spalte" und "rechte_spalte" enthält. Fülle ich die "rechte_spalte" mit Inhalt erweitert sich das DIV "Content" und das DIV "Wrapper" auch nicht. Hängt es nun mit dem postion:absolut vom Wrapper zusammen oder mit den floats und clearings. Für eine Hilfe wäre ich super dankbar, weil mich dieser Fehler unendlich Zeit und Nerven kostet.

Hier das css und das html

HTML-Code:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Kirchheimer Hirschgarten - Biergarten | Feiern im Glashaus | Ü30-Party</title>
<meta name="keywords" content="Biergarten, Kirchheim unter Teck, Kirchheim, Hochzeit, Feiern, Firmenfeier, Geburtstag, Heiraten, Glashaus, Ü30 Party, Ü30, Gesellschaft, Feiern, Party, Spanferkel, Flammkuchen, Events, Veranstaltungen, Veranstaltungsraum, Party Location, urig, Spielplatz, kinderfreundlich">
<meta name="description" content="Der Kirchheimer Hirschgarten hat den schönsten Biergarten in Kirchheim unter Teck, groß und schön geschützt unter Bäumen. Im Hirschgarten befindet sich auch das Glashaus, welches sich für alle Arten von Feiern, wie Hochzeiten, Geburtstage, Jubiläen aber auch für Firmenpräsentationen eignet. Legendär sind die Ü30-Parties einmal im Monat">

<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

	<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css"/>
	<style type="text/css">a#vlb{display:none}</style>
	<script type="text/javascript" src="engine1/jquery.js"></script>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<!-- End WOWSlider.com HEAD section -->

</head>

<body>
<!-- hier das Hintergrundbild, einfach ein inline-img : -->
<img src="bg_fotos/blaetter.jpg" alt="Der grüne Biergarten" class="bg" />
<!-- Der Wrapper der alles umschließt: -->
<div id="wrapper">
	<!-- Beginn div Header: -->
	<div id="header">
		<!-- Beginn div logo: -->
		<div id="logo"><a href="index.html"><img src="seitengrafiken/logo_hirschgarten.png" width="366" height="100" alt="Logo Hirschgarten"></a></div>
		<!-- Ende div logo: -->
      <div id="blatt"><img src="seitengrafiken/blatt.jpg" width="114" height="100" alt="Symbol des Biergartens">
        </div>
   		<!-- Beginn div topnavi: -->
        <div id="topnavi">
          <div id="oben">
          <ul id="topnavi_oben">
			<li id="topnavi_oben_1"><a class="kontakt" href="kontakt.html" title="Kontakt">Kontakt</a></li>
            <li id="topnavi_oben_2"><a class="anfahrt" href="anfahrt.html" title="Anfahrt">Anfahrt</a></li>
          </ul>
          </div>
          <div id="unten">
          <ul id="topnavi_unten">
			<li id="topnavi_unten_1"><a class="gutschein" href="gutschein.html" title="Gutschein">Gutschein</a></li>
            <li id="topnavi_unten_2"><a class="home" href="index.html" title="Anfahrt">Startseite</a></li>
          </ul>
          </div>
        </div>
        <!-- Ende div topnavi: -->
	</div>
	<!-- Ende div Header: -->
    <!-- Beginn div navi_slider: -->
    <div id="navi_slider">
    <!-- Beginn div navi_links: -->
    <div id="navi_links">
    	<div id="navi_1">
        <a class="biergarten" href="biergarten.html">Der Biergarten</a>
        </div>
        <div id="navi_2">
        <a class="glashaus" href="glashaus.html">Feiern im Glashaus</a>
        </div>
        <div id="navi_3">
        <a class="ue30" href="ue30.html">Ü30 Party</a>
        </div>
    </div>
    <!-- Ende div navi_links: -->
    <!-- Beginn div slider: -->
    <div id="slider">
      

<!-- Start WOWSlider.com BODY section -->
	<div id="wowslider-container1">
	<div class="ws_images">
<span><img src="data1/images/slider_1.jpg" alt="Der Eingangshirsch" title="Der Eingangshirsch" id="wows0"/>Willkommen im Hirschgarten</span>
<span><img src="data1/images/slider_2.jpg" alt="Hans Hirsch" title="Hans Hirsch" id="wows1"/>Unser Türsteher</span>
<span><img src="data1/images/slider_3.jpg" alt="Biergarten" title="Biergarten" id="wows2"/>Der hintere Teil</span>
<span><img src="data1/images/slider_4.jpg" alt="Kinderspielplatz eingezäunt" title="Kinderspielplatz eingezäunt" id="wows3"/>Mehr Spielgeräte im Biergarten</span>
<span><img src="data1/images/slider_5.jpg" alt="Biergarten vorderer Teil" title="Biergarten vorderer Teil" id="wows4"/>Platz für alle, auch fürs Fahrrad</span>
<span><img src="data1/images/slider_6.jpg" alt="Spanferkel vom Holzkohlegrill" title="Spanferkel vom Holzkohlegrill" id="wows5"/>Lust?</span>
<span><img src="data1/images/slider_7.jpg" alt="Der Ausschank" title="Der Ausschank" id="wows6"/>Bei uns gilt Selbstbedienung</span>
<span><img src="data1/images/slider_8.jpg" alt="Ü30 Party" title="Ü30 Party" id="wows7"/>Jeden 1. Samstag im Monat</span>
<span><img src="data1/images/slider_9.jpg" alt="Ü30 Party" title="Ü30 Party" id="wows8"/>Feiern für Fortgeschrittene</span>
<span><img src="data1/images/slider_10.jpg" alt="Ü30 Party" title="Ü30 Party" id="wows9"/>In lauen Nächten auch im Biergarten</span>
<span><img src="data1/images/slider_11.jpg" alt="Feiern im Glashaus" title="Feiern im Glashaus" id="wows10"/>Der besondere Raum für ihre Feier</span>
<span><img src="data1/images/slider_12.jpg" alt="Feiern im Glashaus" title="Feiern im Glashaus" id="wows11"/>Schön dekoriert und mit runden Tischen</span>
<span><img src="data1/images/slider_13.jpg" alt="Feiern im Glashaus" title="Feiern im Glashaus" id="wows12"/>Genügend Platz</span>
<span><img src="data1/images/slider_14.jpg" alt="Feiern im Glashaus" title="Feiern im Glashaus" id="wows13"/>Und Platz für die Tanzfläche</span>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="Der Eingangshirsch"><img src="data1/tooltips/slider_1.jpg" alt="Der Eingangshirsch"/>1</a>
<a href="#wows1" title="Hans Hirsch"><img src="data1/tooltips/slider_2.jpg" alt="Hans Hirsch"/>2</a>
<a href="#wows2" title="Biergarten"><img src="data1/tooltips/slider_3.jpg" alt="Biergarten"/>3</a>
<a href="#wows3" title="Kinderspielplatz eingezäunt"><img src="data1/tooltips/slider_4.jpg" alt="Kinderspielplatz eingezäunt"/>4</a>
<a href="#wows4" title="Biergarten vorderer Teil"><img src="data1/tooltips/slider_5.jpg" alt="Biergarten vorderer Teil"/>5</a>
<a href="#wows5" title="Spanferkel vom Holzkohlegrill"><img src="data1/tooltips/slider_6.jpg" alt="Spanferkel vom Holzkohlegrill"/>6</a>
<a href="#wows6" title="Der Ausschank"><img src="data1/tooltips/slider_7.jpg" alt="Der Ausschank"/>7</a>
<a href="#wows7" title="Ü30 Party"><img src="data1/tooltips/slider_8.jpg" alt="Ü30 Party"/>8</a>
<a href="#wows8" title="Ü30 Party"><img src="data1/tooltips/slider_9.jpg" alt="Ü30 Party"/>9</a>
<a href="#wows9" title="Ü30 Party"><img src="data1/tooltips/slider_10.jpg" alt="Ü30 Party"/>10</a>
<a href="#wows10" title="Feiern im Glashaus"><img src="data1/tooltips/slider_11.jpg" alt="Feiern im Glashaus"/>11</a>
<a href="#wows11" title="Feiern im Glashaus"><img src="data1/tooltips/slider_12.jpg" alt="Feiern im Glashaus"/>12</a>
<a href="#wows12" title="Feiern im Glashaus"><img src="data1/tooltips/slider_13.jpg" alt="Feiern im Glashaus"/>13</a>
<a href="#wows13" title="Feiern im Glashaus"><img src="data1/tooltips/slider_14.jpg" alt="Feiern im Glashaus"/>14</a>
</div></div>
<a style="display:none" href="http://wowslider.com">Gallery Slider jQuery by WOWSlider.com v1.9</a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
    </div>
    <!-- Ende div slider: -->
        </div>
    <!-- Ende div navi_slider: -->
       <!-- Beginn div content -->
    <div id="content" class="">
    	<div id="linke_spalte">
        alsdjldj
        </div>
        <div id="rechte_spalte">
          <p>Der Kirchheimer Hirschgarten</p>
          <p>d</p>
          <p>d</p>
          <p>d</p>
          <p>d</p>
          <p>&nbsp;</p>
                      
        </div>
    </div>
    <!-- Ende div content -->
</div>
<!-- Ende: Der Wrapper der alles umschließt: -->
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

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

/* Scrollbalken erzeugen und für Schriftgröße ein Grundmaß einstellen */
html {
	
	font-size:62.5%;
}
a {
	color:#6FB62A;
	text-decoration:none;
}
a:hover {
	color:#000;
	text-decoration:none;
}

	
body {
	height:101.1%;
	font-family:"Droid serif", serif;
	font-size:1.0em;
	letter-spacing:0.1em;
	color:#707070;
}

img.bg {
	/* Hintergrund fuellen */
	min-height: 100%;
	min-width: 1024px;
	/* Skalieren */
	width: 100%;
	height: 100%;
	/* feste Positionierung */
	position: fixed;
	top: 0;
	left: 0;
}

h1,h2,h3,h4,h5,h6 {
	font-family:"Yanone Kaffeesatz", Arial;
	letter-spacing:0.2;

}
h1 {
	font-size:2.8em;
	color:#214FBF;
}

#wrapper {
	position: relative;
	text-align:left; 
	width:980px;
	margin-top:45px;
	margin-right:auto;
	margin-bottom:25px;
	margin-left:auto;
	background-color:#FFF;
	-webkit-box-shadow: -1px 7px 44px #20271c; /* webkit browser*/ -moz-box-shadow: -1px 7px 44px #20271c; /* firefox */ box-shadow: -1px 7px 44px #20271c;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
}

#header {
	width:940px;
	height:100px;
	padding:20px 20px 40px 20px;
}

#logo {
	width:366px;
	float:left;

}

#blatt {
	float:left;
	margin-left:8px;
	width:170px;
	height:100px;
	padding-left:60px;
}

#topnavi {
	width:300px;
	height:72px;
	float:right;
	border:#F2F2F2 4px solid;
	-webkit-border-radius: 15px;
 	border-radius: 15px;
	padding: 10px;
}

#topnavi_oben li {
	font-size:1.3em;
	padding-left:15px;
	display:inline;
}

a.kontakt {
	background: url(../seitengrafiken/symbol_kontakt.png) left center no-repeat;
 	padding-left:40px;
	padding-top:16px;
	padding-bottom:16px;
	padding-right:40px;
	border-right:#E5E5E5 1px dotted;

}

a.anfahrt {
	background: url(../seitengrafiken/symbol_anfahrt.png) left center no-repeat;
 	padding-left:40px;
	padding-top:16px;
	padding-bottom:16px;
}

#topnavi_unten li {
	font-size:1.3em;
	padding-left:15px;
	display:inline;
}
a.gutschein {
	background: url(../seitengrafiken/symbol_gutschein.png) left center no-repeat;
 	padding-left:40px;
	padding-top:16px;
	padding-bottom:16px;
	padding-right:25px;
	border-right:#E5E5E5 1px dotted;
}

a.home {
	background: url(../seitengrafiken/symbol_home.png) left center no-repeat;
 	padding-left:40px;
	padding-top:16px;
	padding-bottom:16px;
}

#oben {
	height:36px;
	margin-top:6px;
}
#unten {
	margin-top:8px;
}

#navi_slider {
	height:350px;
	width:940px;
	padding-right:20px;
	padding-left:20px;

}
#navi_links {
	float:left;
	width:305px;
	height:321px;
}
#slider {
	float:left;
	width:635px;
	height:321px;
}

#navi_1 {
	display:block;
	float:left;
	width:275px;
	height:87px;
	margin-bottom:10px;
	border:#F2F2F2 4px solid;
	-webkit-border-radius: 15px;
 	border-radius: 15px;
	background:url(../seitengrafiken/bg_navi_l.png) repeat-x;
	padding-left:10px;
	padding-top:
}
#navi_2 {
	display:block;
	float:left;
	width:275px;
	height:87px;
	margin-bottom:10px;
	border:#F2F2F2 4px solid;
	-webkit-border-radius: 15px;
 	border-radius: 15px;
	background:url(../seitengrafiken/bg_navi_l.png) repeat-x;
	padding-left:10px;
}
#navi_3 {
	display:block;
	float:left;
	width:275px;
	height:87px;
	margin-bottom:10px;
	border:#F2F2F2 4px solid;
	-webkit-border-radius: 15px;
 	border-radius: 15px;
	background:url(../seitengrafiken/bg_navi_l.png) repeat-x;
	padding-left:10px;
}

a.biergarten {
	display:block;
	font-family:"Yanone Kaffeesatz", Arial;
	font-size:2.5em;
	text-transform:uppercase;
	color:#FFF;
	padding-top:30px;
	padding-bottom:21px;
	padding-left:85px;
	background: url(../seitengrafiken/s_navi_1.png) left bottom no-repeat;
}
a.biergarten:hover {
	color:#000;
}

a.glashaus {
	display:block;
	font-family:"Yanone Kaffeesatz", Arial;
	font-size:2.5em;
	text-transform:uppercase;
	color:#FFF;
	padding-top:30px;
	padding-bottom:21px;
	padding-left:85px;
	background: url(../seitengrafiken/s_navi_2.png) left bottom no-repeat;
}
a.glashaus:hover {
	color:#000;
}

a.ue30 {
	display:block;
	font-family:"Yanone Kaffeesatz", Arial;
	font-size:2.5em;
	text-transform:uppercase;
	color:#FFF;
	padding-top:30px;
	padding-bottom:21px;
	padding-left:85px;
	background: url(../seitengrafiken/s_navi_3.png) left bottom no-repeat;
}
a.ue30:hover {
	color:#000;
}

#content {
	clear:both;
	background-color:#FFF;
	width:940px;
	padding-right:20px;
	padding-left:20px;
	padding-bottom:30px;
	background-image:url(../seitengrafiken/bg_white.png);
	font-size:1.2em;
}

#linke_spalte {
	float:left;
	background-color:#FFF;
	width:305px;
}

#rechte_spalte {
	float:left;
	background-color:#FFF;
	width:635px;
}

**sejuma** · 14.06.2012, 13:05

Wer floatet, muss auch clearen!
Füge dies vor Schließen des wrappers ein:

<div style="clear: both;"></div>
</div>

**toto3007** · 14.06.2012, 13:21

Super! Das funktioniert auf Anhieb! Vielen Dank sejuma
Auf welches floaten bezieht sich nun das clearen?

**sejuma** · 14.06.2012, 18:20

Auf alles, was innerhalb des wrappers gefloatet ist.
Durch das clearen wird der "Fluss der Elemente" wieder hergestellt.
"clear: right" würde sich nur auf rechtsgefloatete Elemente beziehen.
Insofern ist "both" universell.

**toto3007** · 14.06.2012, 19:12

Vielen dank

**PascalKremp** · 15.06.2012, 09:05

Hi toto,

ich muss sejuma mit: "Wer floatet muss auch clearen" absolut recht geben. Ich selbst hab ne weile gebraucht, bis ich es verstanden habe.

Ich möchte dir kurz einen Tipp geben.

CSS classe clearfix nutzen
Füge diese drei Zeilen in deine CSS datei mit ein.

Code:

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Der HTML-Code
Von nun an, solltest du alles mit einem Container umschließen, der nebeneinander angezeigte Container besitzen soll.

Beispiel:

HTML-Code:

<div class="container">
    <div class="left">...</div>
    <div class="right">...</div>
</div>

.clreafix DO IT!!!

Wir fügen einfach unserem div.container die Klasse clearfix hinzu.

HTML-Code:

<style>
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }

    .left {
        width:70%;
        float:left;
    }
    .right {
        width:30%;
        float:left;
    }
</style>
<!-- Klasse clearfix hinzufügen-->
<div class="container clearfix">
    <div class="left">...</div>
    <div class="right">...</div>
</div>

Vorteil
Wir brauchen keine häßlichen Codezeilen wie:

HTML-Code:

<div style="clear: both;"><!--Clear-Div--></div>

Es sieht sauberer aus.
Funktioniert in allen Browser.

Ich hoffe ich konnte dir und anderen damit helfen!

Gruß
Pascal

**toto3007** · 15.06.2012, 09:24

Super. Danke für die Antwort. Auch das funktioniert prima.
Gruß Torsten

**btgson2000** · 16.06.2012, 03:44

Ich hoffe ich konnte dir und anderen damit helfen!

zur Startseite vom TP

Thema: Wrapper und auch weiterer DIV umschließt den Inhalt nicht

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Wrapper und auch weiterer DIV umschließt den Inhalt nicht

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[PHP] fetch_assoc funktioniert. fetch_row nicht. (In MySQLi Wrapper KLasse)

[CSS] Elastisch/fluides layout : wrapper umschließt nicht richtig

[smarty] Weis auch nicht mehr.. Template lädt nicht!

Inhalt auch unterhalb der Gestaltung

#wrapper ???

Aktive Benutzer

Aktive Benutzer

Berechtigungen