Seitenrand dynamisch wachsen lassen mit Content

**Tobifue** · 13.12.2009 20:13

Hallo Leute,
ich baue gerade zu Übungszwecken das Template "ja_purity" nach. Zur Zeit hänge ich bei einem kleinen Problem fest und zwar möchte ich, dass der Seitenrand (links, rechts) sich automatisch an die Contentlänge anpasst. Den roten Hintergrund den ihr auf dem Screenshot seht, ist der Hintergrund des Div's "Mitte" (Zur besseren Veranschaulichung rot gefärbt). Dieses Div umschließt die Seitenmenüs und den Contentbereich. Ich möchte nicht mit festen Höhenangaben arbeiten müssen. Der Hintergrund des linken Seitenmenüs unterscheidet sich farblich vom Hintergrund des Content (auf dem Screenshot nicht sehr gut erkennbar).

Hier ein Screenshot:

http://s4.directupload.net/file/d/2007/7n5j4zuq_jpg.htm

Code der Index.php

Code:

<body>
 	<div id="container">
    	<div id="top">
        	<div id="top-logo">
            </div>
            <div id="top-right">
            <div id="top-right_2">
            </div>
            </div>
        </div>
        <div id="mitte">
        	<div id="left">
            <jdoc:include type="modules" name="left" style="xhtml" />
            </div>
            <div id="content">
            <jdoc:include type="component" />
            </div>
            <div id="rechts">
            <jdoc:include type="modules" name="right" style="xhtml" />
            </div>
        </div>
        <div id="footer1">
        footer1
        </div>
        <div id="footer2">
        <jdoc:include type="modules" name="footer" style="xhtml" />
        </div>
 		
   </div>
</body>

Code der CSS:

Code:

/* Grundkonfiguration der Seite */
html{
min-height: 101%;
}

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

#container{
background:#FF0000;
width:100%;
margin: 0 auto;
}

/*Header*/
#top
{
background:#333333;
width:100%;
height:80px;
}

#top-logo{
background:#33FF66 url(../images/logo.gif) no-repeat;
float:left;
height:80px;
width:207px;
margin-left:5px;
}

#top-right{
background:url(../images/header/header2.jpg);
width:600px;
height:80px;
float:right;
margin-right:20px;
}
#top-right_2
{
background:url(../images/header-mask.png);
width:602px;
height:80px;
}

/*Mittelbereich*/
#mitte{
background:#FF0000;
width:100%;
float:left;
}

#left{
width:21%;
background:#F6F6F6;
float:left;
}
#content{
background:#FFFFFF;
width:58%;
float:left;
}
#rechts{
background:#FFFFFF;
width:21%;
float:right;
}

/*1. Footer*/
#footer1{
background:#996633;
width:100%;
height:150px;
float:left;
border-top: 5px solid #CCCCCC;
}
#footer2{
background:#FF3300;
width:100%;
height:50px;
border-top: 5px solid #CCCCCC;
float:left;
}

Bin für jeden Tipp dankbar! ;-)

**Tobifue** · 15.12.2009 10:58

Die Lösung meines Problems sieht wie folgt aus:

Den Seitenmenüs (#left und #right) wird ein hoher padding-bottom Wert zugewiesen z.B. padding-bottom: 5000px und dem Div #mitte wird overflow:hidden hinzugefügt.
Hierdurch schießen die Seitenmenüs über die Höhe von #mitte hinaus, allerdings zeigt #mitte dies nicht an. Somit wirkt es als seien die Seitenmenüs bündig mit dem Content.

Leider, funktioniert dies nur, wenn man dem div #mitte einen festen Höhenwert zuweist. Somit ist es nur eine bedingte Lösung.

**-SBob-** · 15.12.2009 13:02

Wieso arbeitest du nicht mit min-height Anweisungen?

**Tobifue** · 15.12.2009 22:06

min-height bringt mich nicht wirklich weiter bei meinem Problem...

Hier gibt es eine super Seite mit dessen Hilfe ich mein Problem nun komplett lösen konnte.

http://webstylez.net/Floatende-Divs-gleich-hoch-machen/

Thema: Seitenrand dynamisch wachsen lassen mit Content

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Seitenrand dynamisch an Content anpassen

Lösung

Lesezeichen

Lesezeichen

Berechtigungen