Problem mit 2-spalten layout (height: 0 auto)

Shinto

Hallo zusammen!

Ich habe mich mal drangesetzt, um eine Homepage zu basteln.
Alles schön und gut, ich habe angefangen, etwas zu Designen, wurde damit auch fertig und beschloss, meine Aufmerksamkeit dem Code zu widmen.
Das Grundgerüst steht, alles wird gut angezeigt, bloß habe ich ein Problem in meinem Content-Bereich.
Es handelt sich um ein zweispaltiges Layout, wobei die Rechte Spalte schmäler ist als die Linke. Sie zu positionieren hab ich schon hinbekommen, nur, da ich die höhe mit height: 0 auto; bestimmt habe, sind die beiden Spalten nicht gleich hoch =(.

Gäbe es einen Trick, diese Spalten auf die selbe höhe zu bringen, ohne auf height: 0 auto; zu verzichten?

Der Link zur HomePage ist http://computer-gate.ftube.de/hp/index.php.

Der Css teil schaut wie folgt aus:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:

/* Allgemeine Einstellungen */
body {
background: #adadad url(images/background.png) top left repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
}

a:link {
text-decoration: none;
font-weight: bold;
color:#000000
}

a:hover {
text-decoration:underline;
}

a:visited { text-decoration:line-through; }

p {
font-weight: 400;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: 400;
}

ul {
list-style-type: none;
padding: 5px;
margin: 0;
vertical-align:middle;
}

fieldset {
width: 500px;
background-color: #fafafa;
float: none;
}

legend {
font-weight: bold;
font-size: 120%;
}

#navigation li {
display:inline;
vertical-align: middle;
padding-left: 15px;
}

/* Id's */

#wrap {
width: 960px;
text-align: center;
margin: 0 auto;
}

#header {
background: transparent url(images/header.png) top left no-repeat;
border-bottom: 0;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
width: 960px;
height: 192px;
}

#navigation {
width: 960px;
height: 30px;
background: transparent url(images/navi_bg.png) top left repeat-x;
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
font-weight: bold;
font-size: 120%;
}

#inhalt {
background: transparent url(images/inhalt_bg.png) top left repeat-y;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
width: 960px;
float:left;
position: relative;
padding-bottom: 15px;
}

#inhalt p {
padding: 1em 1.2em; /* Innenabstände für alle Absätze innerhalb des Inhaltsbereichs */
}

#content {
width: 753px;
height: 0 auto;
position: relative;
background: transparent url(images/content_bg.png) top left repeat-y;
float: left;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
}

#sidebar {
width: 204px;
height: 0 auto;
position:relative;
background: transparent url(images/sidebar_bg.png) top left repeat-y;
float: right;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
padding-bottom: 15px;
}

#footer {
width: 960px;
height: 29px;
float: left;
background: transparent url(images/footer.png) bottom left no repeat;
}

und der html teil so:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>***********.de: Moderne Designs &amp; Co</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="basics.css" media="screen" />
</head>
<body>
<div id="wrap">

<!--Head-Bereich samt Logo-->
<div id="header">
</div>

<!--Hauptnavigation-->
<div id="navigation">
<ul>
<li>Startseite</li>
<li><a href="aktuelles.php">Aktuelles</a></li>
<li><a href="about.php">About</a></li>
<li><a href="referenzen.php">Referenzen</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>
<!--Bereich für Hauptinhalt-->
<div id="content">
<h2> Lorem Ipsum!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>

<!--Werbung o.Ä.-->
<div id="sidebar">
<h3>News</h3>
<h4>28.05.2008 - Eröffnung</h4>
<p>Mit Freuden darf ich bekannt geben, dass die Website www..de nun eröffnet ist....</p>
<a href="index.php">Weiterlesen</a>
</div>

<!--Footer für Copyright-->
<div id="footer">
</div>

</div>
</body>
</html>

Ich hoffe auf Hilfe und bedanke mich bereits im Voraus fröhlich

codingnoob

Seit wann ist denn height ein Attribut mit der Möglichkeit, ihm 2 Werte zu geben, was soll denn height: 0 auto bewirken?

Ich habe das noch nie gelesen oder gesehen, CSS4You auch nicht und weitersuchen will ich nicht, weil ich nicht glaube, dass es das gibt.

Zwei beliebigen Boxen kannst du nicht ohne Tricks die gleiche Höhe geben, das funktioniert einfach nicht, wenn die Höhe nicht von vorneherein absolut oder relativ festgelegt wird.

Shinto

echt? oh... da hat mir jemand, der sich als css-experte ausgegeben hat, humbuck erzählt xD.

ich werde mal versuchen, die beiden spalten in ein neues div zu stecken, und diesem dann die höhe auto zuweisen. die spalten werde ich dann auf 100% setzen.

codingnoob

Die Höhe auto brauchst du nicht zuweisen, das ist Initialwert.

Das einfachste wäre, den gewünschten Hintergrund direkt deiner neuen Außenrumbox, in die du die beiden Spalten steckst, zu geben. Das ist aber mit relativer Breite dann wieder sehr schwierig (außer seeeehr breiter Hintergrund und relative Positionierung desselben)