Tweet
Hi,
ich bin seit ein paar Tagen am basteln eines CSS Designs...
So soll es aussehen:
Das Design soll die gesamte Seite ausfüllen - jeder Berecih wird mit 20px Freibereich getrennt. Wenn ich aber im Bereich main mehr Text habe, als der Bereich auf einer Seite hat, soll er einfach vergrößert werden. da wäre es aber optimal, wenn ich dann die höhe von left und main immer gleich hätte.
Der Inhalt meiner css und html Datei:
ich bin seit ein paar Tagen am basteln eines CSS Designs...
So soll es aussehen:
Das Design soll die gesamte Seite ausfüllen - jeder Berecih wird mit 20px Freibereich getrennt. Wenn ich aber im Bereich main mehr Text habe, als der Bereich auf einer Seite hat, soll er einfach vergrößert werden. da wäre es aber optimal, wenn ich dann die höhe von left und main immer gleich hätte.
Der Inhalt meiner css und html Datei:
Code:
html, body, #container {
height:100%;
margin: 0;
padding: 0;
background-color:#F1FCE0;
font-family:"Comic Sans MS";
font-size:14px;
}
#container {
padding:20px;
width:auto !important;
width: 100%;
min-height:100%;
height:auto !important;
height:100%;
}
#header {
background-color:#FFFFFF;
border:1px solid #43D364;
width:auto !important;
width: 100%;
height:100px !important;
height:98px;
}
#left {
float:left;
font-size:16px;
margin-top:20px;
color: #43D364;
background-color:#FFFFFF;
width:100px !important;
width:98px;
height: auto !important;
height: 100%;
border: 1px solid #43D364;
}
#main {
margin-top:20px;
background-color:#FFFFFF;
border: 1px solid #43D364;
text-align: left;
padding:30px;
margin-left: 120px;
width: auto !important;
width: 100%;
height: auto !important;
height: 100%;
}
HTML Code:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Der Sinn des Lebens</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">Das ist der Header</div> <div id="left" align="center">linker Bereich</div> <div id="main" align="center">Hauptbereich mit eventuell viel Text</div> </div> </body> </html>
Comment