Ich versuche auf meiner Webseite 2 verschiedene divs sich automatisch an den Content anpassen zu lassen. Das wäre die Navigation (box3) und der Content (box4).
Ich habe es mal mit height: 100%; probiert, das funktioniert aber nicht. Wie schaff ich es denn, das beide Inhalte immer gleich lang sind, auf jeden Fall so lang wie der Content ?
body {
background-color: #CCCCCC;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#container {
width: 968px;
}
.box2{
padding:5px 20px 5px 5px;
background-color: #5B91AD;
text-align: right;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
color: #FFFFFF;
}
.box3{
padding-right: 2px;
padding-bottom: 10px;
padding-left: 2px;
float:left;
width:160px;
height: 100%;
background-color: #5B91AD;
}
.box4{
float:none;
padding:15px 20px 10px 25px;
margin: 0px 0px 0px 165px;
line-height: normal;
text-align: justify;
background-color: #FFFFFF;
height: 100%;
}
indem Du body und html auch 100% Höhe zuweist.
body,html {width:100%;}
steffenk schrieb
indem Du body und html auch 100% Höhe zuweist.
body,html {width:100%;}
Du meinst body,html {height:100%;}
Das habe ich zugewiesen, funzt aber auch nicht ?
Hi,
ich kann bei diesem Problem die YAML-Webseite empfehlen:
http://www.highresolution.info/webdesign/yaml/
Da findest du bestimmt eine entsprechende Design-Vorlage,
die dein Problem löst.
Hth,
Torben
Naja der Link ist sehr interessant für zukünftige Projekte. Meine Vorlage komplett umbauen will ich eigentlich nicht.
Mir scheint aber das Float sich eigentlich nicht auf die Höhe bezieht oder ?
Wir macht ihr das den das die Seite immer von der Höhe schon an den Inhalt angepasst ist. Sicherlich arbeitet der ein oder andere auch mit DIVs ?
dann schau Dir mal folgenden Artikel an, dann sollte es funktionieren
http://tuts.nicogutmann.de/css/faux_columns.php
Das habe ich mal probiert, aber irgendwie scheint das nicht zu funktionieren. Bei mir wird die Grafik irgendwie nicht angesprochen obwohl alles korrekt scheint ?
Mein Code sieht so aus:
<div class="hoehe">
<div class="box3">
###navi_links###
<br />
<br />
###termine###
</div>
<div class="box4">
###klickpfad###
<br />
<br />
###content###
<br />
<br />
<br />
###fuss###
</div>
</div>
Hab das folgende Stylesheet:
/* Stylesheets für Höhenanpassung*/
div.hoehe {
width:968px;
overflow:auto; /* Aufgrund des Floatens der Innencontainer */
background: url(../fileadmin/images/faux_columns.jpg) 0 0 repeat-y; /* Der Fälscher tritt in Erscheinung */
}
So hab meinen Code noch ein wenig umgebastelt und jetzt funzt es. Auch die Ansicht im IE Win ist jetzt korrekt. Der hat ja immer nen Rand zwischen den Boxen angezeigt, da er das Boxen Modell nicht korrekt interpretiert.