• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div container mit auto height

M

mvst1984

Neues Mitglied
Hallo,
ich habe ein kleines Problem und verzweifle schon fast.
Habe das gesamte Netz nach einer Lösung abgesucht doch noch nichts gefunden.
evtl. kann mir ja einer von euch helfen.
also ich möchte ein div Container welcher in einer verschachtelung liegt dem Inhalt mit der höhe anpassen.
Allerdings kappt das nicht so wie gewollt, obwohl ich alle befehle ausprobiert habe
es geht um den div "anzeige" welcher sich dem Inhalt anpassen soll damit der graue Hintergrund sich bis runter an den schwarzen footer zieht und ggf. bei einem langen Eintrag einfach vergrößert.
ich habe vor wordpress zu includen
Lux by Night
ich wäre euch sehr dankbar für jede Hilfe
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Lux by Night</title><link rel="stylesheet" href="./container.css" type="text/css"><link rel="stylesheet" href="./navi.css" type="text/css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="s3Slider.js"></script><script type="text/javascript">    $(document).ready(function() {        $('#slider').s3Slider({            timeOut: 4000        });    });</script><div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=241232945927649";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script></head>

<div id="seite">
   <div id="headerback">   <div id="header"><div id="logo"><img src="http://www.html.de/images/logo_header.png" width="345" height="67" alt="logo"></div>   <div id="navi"><ul id="menu">                        <li><a href="index.html">News</a></li>                    <li><a href="artists.html">Nightshots</a></li>                    <li><a href="events.html">Agenda</a></li>                    <li><a href="events.html">Music</a></li>                    <li><a href="releases.html">Mediadaten</a></li>                    <li><a href="booking.html">Kontakt</a></li>                    <li><a href="kontakt.html">Impressum</a></li>    </ul></div></div>
   <div id="anzeige">
<div id="slider"><ul id="sliderContent">            <li class="sliderImage">                <img src="example_images/410/1.jpg" alt="3" />                <span class="bottom"><strong>Pete Doehrty</strong><br />zu Gast in der Rockhal am 09.04</span>            </li>            <li class="sliderImage">                <img src="example_images/410/2.jpg" alt="4" />                <span class="bottom"><strong>The Barcodes</strong><br />I sould my soul for Rock´n´Roll</span>            </li>            <li class="sliderImage">                <img src="example_images/410/3.jpg" alt="5" />                <span class="top"><strong>Title text 2</strong><br />Content text...</span>            </li>            <li class="sliderImage">                <img src="example_images/410/4.jpg" alt="5" />                <span class="top"><strong>Title text 2</strong><br />Content text...</span>            </li>            <div class="clear sliderImage"></div>        </ul></div><div id="pr"><img src="http://www.html.de/images/welove.jpg" width="300" height="300" alt="pr_left"></div>
<div id="news"></div><div id="fb"><div class="fb-like-box" data-href="http://www.facebook.com/pages/Lux-by-Night/201141576670629" data-width="300" data-show-faces="true" data-stream="false" data-header="true"></div></div>

</div>
<div id="footer"></div>
</div></body></html>

hier der css code:

Code: 
  body {
    color: #000;
    font-size: 50%;
    margin: 0px;
    padding: 0px;
    height: 0px auto;
    font-family: Helvetica,Arial,sans-serif;
    background-image: url(images/bg.png)
    
    
  }


  div#seite {
    position: fixed;
    float: left
    margin: 0px auto; 
    height: 0px auto;
    position : relative;;
    


  }
  
  div#anzeige {
    margin: 0px auto;
    height: 0px auto;
    min-height: 200px;
    width: 900px;
    background-color: #eeeeed;
  }


  div#headerback {
    height: 148px;
    width: 0px auto;
    background-color: #000


  }
  
    div#header {
    margin: 0 auto;
    height: 148px;
    width: 900px; 


  }
  
    div#logo {
    float:left;
    margin-top: 75px;
    margin-left: 10px;
    height: 67px;
    width: 345px;


  }
  
    div#navi {
    float: right;
    text-align: right;
    margin-top: 117px;
    margin-left: 30px
    height: 27px;
    width: 490px; 


  }


    div#skyscraper {
    height: 600px;
    width: 160px;
    margin-left: 10px;
    background-color: #000;
}


    div#slider {
    float: left;
    height: 300px;
    width: 570px;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #999;
}


    div#pr {
    float: right;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    margin-top: 10px;
}


    div#news {
    float: left;
    height: 0 auto;
    width: 570px;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #999;
}


    div#fb {
    float: right;
    height: 0 auto;
    width: 300px;
    margin-right: 10px;
    margin-top: 10px;
}




  div#footer {
    margin: 0 auto;
    height: 148px;
    width: 100%;
    background-color: #000 


  }


h1 { color:#000;}
a:visited { font-weight:bold; color:#000; text-decoration:none; }


















#slider {
    width: 590px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
#sliderContent {
    width: 590px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 300px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
    clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
ul { list-style-type: none;}


ich wäre euch sehr dankbar für Hilf
 
Aus deinem Code wird man erst schlau, wenn man sich das ganze sehr genau anschaut, da es ein schreckliches durcheinander ist.

Ich habe im CSS-Teil mehrmals float: left; gesehen. Du müsstest dieses floating mit einem clear: left; bzw clear: both; wieder beenden. Dann wird die Höhe auch automatisch angepasst.


lascaux


PS: s3slider fetzt :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben