Hallo Leute,
ich bin gerade dabei ein Layout zu erstellen, was immer 100% breit sein soll, bzw. max-width: 1200px. Dabei habe ich eigentlich derzeitig 2 gravierende Probleme die ohne Eure Hilfe wohl nicht hinbekommen werde.
Hier erst einmal der Link zum
Layout
Mein 1. Problem sind die Container "LEFT" und "RIGHT". Hier sind jeweils background-images eingebunden die jedoch nicht mit nach unten gehen wenn im Container "main" der Text länger wird.
Mein 2. Problem ist das Layout im IE7. Dort stimmt ja nun garnichts mehr und finde einfach den Fehler nicht.
Vielleicht könnt Ihr ja mal einen Blick darauf werfen und mir ein paar Tipps geben.
Grüße Marko
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
/* FIX */
* {margin:0;padding:0}
html { height: 100%; }
body { height: 100%; padding: 0; background: #DEDEDE; color:#fff; font:83%/1.5 tahoma,verdana,arial,sans-serif; }
/* LAYOUT - main body of page */
#wrap { min-width: 770px; max-width: 1200px; height: 100%; margin: 0 auto; position:relative; min-height: 100%; }
/* LAYOUT - HEADER */
#header { background: #555; margin: 0; padding: 0; height: 158px; width:100%; text-align: center; }
/* LAYOUT - CONTENT */
#content { position: relative; width: 100%; min-height: 200px; background: #999; }
#left { float:left; background: url(bg_content_left.gif) repeat-y 0; color: #000; position: absolute; top: 0; left: 0; width: 165px; text-align: center; }
#right { float:right; background: url(bg_content_right.gif) repeat-y 0; color: #000; position: absolute; top: 0; right: 0; width: 165px; text-align: center; }
#main { position: absolute; top: 0; left: 0; margin: 0px 180px 0px 180px; text-align: justify; }
/* LAYOUT - FOOTER */
#footer { position: relative; background: #555; height: 25px; text-align: center; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">HEADER</div>
<div id="content">
<div id="left">LEFT</div>
<div id="main">
Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text.
Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text.
Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text.
Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text.
Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text. Hier kommt der Text.
</div>
<div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>