dynmisches Layout in Breite und Höhe

[kompi19]

Moin moin zusammen!

Hab nen kleines Problem, wie ihr im Folgenden sehen könnt:



Versuche hier ein kleines Layout zu erzeugen, was in Breite und Höhe vollkommen dynamisch sein soll. Wie ihr seht klappt es mit dem Header und Footer schon einmal. Diese beiden passen sich der Breite des Inhaltes an. Das Problem sind nun die beiden äußeren mittleren Teile, die sich nicht automatisch verlängern. Sie sind immer nur so lang, wie ihr Inhalt und eigentlich sollten sie gar keinen Inhalt haben. Den habe ich nur mal so zur Demonstration eingefügt.

Der CSS-Code sieht dazu so aus:

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:
@charset "utf-8";
/* CSS Document */

body, html {
	height: 100%;
}

#lbBackground{
	background:#000000;
	opacity: 0.75;
	position:fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
}	

#text {
	background:#FFFFFF;
	float:left;
}

#lbMiddleLeft {
	background:url(../img/lb/lbMiddleLeft.png) repeat-y;
	width: 20px;
	height: 100%;
	float:left;
}

#lbMiddleRight {
	background:url(../img/lb/lbMiddleRight.png) repeat-y;
	width: 20px;
	height: 100%;
	float:left;
}

#wrapper {
	float:left;
	position:relative;
}

#lbTopMiddle {
	background: url(../img/lb/lbTopMiddle.png) repeat-x;
	height: 20px;
	margin-left:20px;
	margin-right: 20px;
}

#lbTopLeft {
	background: url(../img/lb/lbTopLeft.png) no-repeat;
	width: 20px;
	height:20px;
	float:left;
}

#lbTopRight {
	background:url(../img/lb/lbTopRight.png) no-repeat;
	width: 20px;
	height:20px;
	float:right;
}

#lbBottomLeft {
	background:url(../img/lb/lbBottomLeft.png) no-repeat;
	height:20px;
	width: 20px;
	float:left;
}

#lbBottomMiddle {
	background:url(../img/lb/lbBottomMiddle.png) repeat-x;
	height: 20px;
	margin-left: 20px;
	margin-right: 20px;
}

#lbBottomRight {
	background:url(../img/lb/lbBottomRight.png) no-repeat;
	float:right;
	height:20px;
	width: 20px;

Das HTML:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
<div id="lbBackground"></div>

<div id="wrapper">

	<div id="lbTopLeft"></div>
	<div id="lbTopRight"></div>
    <div id="lbTopMiddle"></div>
    
	<div id="lbMiddleLeft">a</div>
	<div id="text">
        <p>naajjajafgdfgsdsfsdgsdfg</p>
        <p>naajjajasgsdfgdfsgdf</p>
        <p>naajjajagsdfgdsgsdgdfsgsdgsdgsgsddddddd</p>
        <p>naajjajagdsgdsgsg</p>
        <p>naajjajagsdgdsg</p>
    </div>
    <div id="lbMiddleRight">a</div>
    <div style="clear:both;"></div>
    
    <div id="lbBottomLeft"></div>
	<div id="lbBottomRight"></div>
    <div id="lbBottomMiddle"></div>
    
</div>

Vielleicht kann ja einer von euch helfen.

Danke!

[dori]

Mach es dir doch einfacher, spare Markup und gehe mit der Zeit.

CSS3 abgerundete Ecken.