Div größen

html.de-Forum HTML, XHTML & CSS
1

Hallo liebes Forum,

Ich habe ein Problem, ich möchte einfahc nur zwei Divs nebeneinander stellen die abhängig vom Inhalt der einen Seite gleich groß skaliert bleiben.

[HTML]

444 Site down

Lanegr text

Größe passt sich an

[/HTML]
  • CSS:

[HTML]@charset „utf-8“;
/* CSS Document */
body {
background-color: #EFEFEF;
font-family: Cambria, „Hoefler Text“, „Liberation Serif“, Times, „Times New Roman“, serif;
}
div.Wrap1 {
heigth: 100%;
width: 960px;
margin: 0;
padding-top: 0;
}
.header {
position: relative;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
margin: 0;
}
div.content {
background-color: rgba(255,0,4,1.00);
overflow: hidden;
margin: 0;
}
div.navbar {
margin-top: -6px;
background-color: rgba(203,240,223,1.00);
height: 40px;
}
ul.navbarpanel {
margin: 0;
}
ul.navbarpanel li {
margin: 0;
clear: both;
display: inline-block;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
ul.navbarpanel li:hover {
margin: 0;
background-color: #FFFFFF;
}
li a {
margin: 0;
text-decoration: none;
color: #2F2F2F;
}
div.LeftPanel {
width: 10%;
float: left;
background-color: rgba(158,220,190,1.00);
padding: 2px;
heigth: 100%;
}
div.contentinside {

background-color: rgba(244,253,250,1.00);
padding: 2px;
padding: 20px;

}
footer {
margin: 0;
height: 176px;
background-color: rgba(210,237,248,1.00);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
clear: both;
}
[/HTML]

Hier nochmal als JPEG.

[ATTACH]3730[/ATTACH]

Ichw eiß die Frage wurde schon oft behandelt, und ich habe sie auch schon oft gefunden. Das Problem ist jede Seite beschreibt einen anderen Löszungsweg, und keiner funktioniert so richtig bei mir. Ich habe daran zwei Tage verbracht, ich glaube ich bin grad ein bisschen zu blöd dafür. Es wäre sehr nett wenn jemand freundliches mir kurz sagen könnte wie ich es hinbekomme.

Gruß

2

Ein Weg wäre, die Höhe des grünen Containers per JavaScript zu ermitteln und diese dem weißen Container als CSS-Attribut zuzuweisen.

3

Oke mit Javascript kenne ich mich noch nicht wirklich aus, gibt es auch einen „guten“ css weg?

4

Es geht auch mit css. Allerdings sind die Spalten nicht gleich lang, sondern es sieht nur so aus. Sollte aber für deine Zwecke reichen.
Im Beispiel ist die Contentspalte immer die längste.

<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<style>

* {
 margin:0;
 padding:0;
}
html {
 background:#444;
}
body {
 width:100%;
 max-width:1100px;
 margin:0 auto;
 background:#fff;
 overflow:hidden;
}
header {
 padding:20px;
 background:#ddd;
 text-align:center;
}

nav {
 width:38%;
 float:left;
}

section {
 margin-left:38%;
 display:block;
 background:#dad;
}

section:after {
 content:"";
 display:block;
 clear:both;
}

footer {
 background:#eee;
}

p {
 padding:20px;
}
</style>
</head>

<body>
<header>
<h1>Zweispalten-Layout</h1>
</header>

<nav>
<p>navigation</p><p>navigation</p><p>navigation</p><p>navigation</p><p>navigation</p>
</nav>
<section>
<p>inhalt</p><p>inhalt</p><p>inhalt</p><p>inhalt</p>
</section>
<footer>Footer</footer>
</body>
</html>