XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit Layout (http://xhtmlforum.de/showthread.php?t=45888)

kruemelchen26 15.05.2007 23:40

Probleme mit Layout
 
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>



Alle Zeitangaben in WEZ +2. Es ist jetzt 16:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023