Avion: Zwei float-Elemente sowie ein Bild in der Mitte. Ich oder IE!

Beitrag lesen

SELF-Forum

Zwei float-Elemente sowie ein Bild in der Mitte. Ich oder IE!

Avion Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Ingo,

schon einmal ein Danke für die Hilfe.

habe es jetzt wie folgt geändert...
Das Problem hatte ich aber eben schon, der Content berech sollte 460px breit sein, damit er genau hinein passt. Wie kann ich ihn denn ohne position oder Margin: auto centrieren?

Denn Immer wenn ich den contentbereich passend machen will bricht er um...
hier das Beispiel:

Edit:
habe den header und den footer in den Container verlegt.
Die beiden Seiten auf float gestellt.
Versucht den Content zu zentrieren.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  
<html>  
  
  <head >  
    <title>  
     Welcome to: Ideas unlimited!  
  </title>  
  
  <link type="text/css" href="style.css" rel="stylesheet" media="screen" />  
  
  </head>  
  
  
  
  <body>  
  
  
  
  <div id="container">  
  
   <div id="header">  
    </div>  
  
    <div id="left">  
    Text links  
   </div>  
  
    <div id="right">  
    Text rechts  
   </div>  
  
   <div id="content">  
    Text plus Fotos usw...  
    </div>  
   <div id="footer">  
     <P><a href="mailto:bettinavonfinck@gmx.de?CC=bettinavonfinck@ideasunlimited.de&amp;subject=Ideas%20Unlimited:%20">E-Mail schreiben</a></p>  
     <p>Ideas Unlimited - Bettina Freifrau von Finck</p>  
     <p>Große Weinmeisterstraße 21a - 14469 Potsdam</p>  
    </div>  
 </div>  
  
  
  
  
  
  
  
  
  
  
</html>

CSS:

/* ---------- CSS für Ideas unlimited ---------- by: Kasimir Frh. v. Finck  
Farben: creme:#faf4e6 rot:#e2483c hellblau:#758a9d mittelblau:#507798------*/  
  
/* ---------- Hintergrund tile... ---------- */  
body {  
 background-image:url(files/tile_bg01.jpg);  
 font-size: 15px;  
 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;  
 color:#564b47;  
 padding:0;  
 margin:0;  
}  
  
a {color: #e2483c;}  
a:visited {color:#507798;}  
a:hover {color: #e2483c;}  
a:active { color:#758a9d;}  
  
  
/* ---------- header ist nicht mit im Container drin... ---------- */  
#header {  
 width: 960px;  
 height:100px;  
 margin: 0 auto;  
 border-bottom: 2px solid #545252;  
 background-image:Url(files/title_hd.jpg);  
 background-color: #faf4e6;  
 background-repeat: no-repeat;  
 background-position: center;  
 }  
  
  
/* ---------- der Container gibt dem layout seinen Rahmen ---------- */  
#container {  
 margin: 10%; auto;  
 padding: 0px;  
 width: 960px;  
 max-height:320px;  
 background-color: #c0c0c0;  
 border: 2px solid #545252;  
}  
  
/* ---------- Inhalt ---------- */  
#content {  
 margin: 0px;  
 padding: 0px;  
 width: 460px;  
 height:320px;  
 text-align: center;  
 background-color: #faf4e6;  
}  
  
  
/* ---------- navigavtions ---------- */  
#left {  
 float:left;  
 padding: 0px;  
 height:320px;  
 width: 250px;  
 text-align: center;  
 background-color: #e2483c;  
 border-right:2px solid #545252;  
}  
  
#right {  
 float:Right;  
 padding: 0px;  
 height:320px;  
 width: 250px;  
 text-align: center;  
 background-color: #e2483c;  
 border-left:2px solid #545252;  
}  
  
  
/* ---------- footer ------------ */  
#footer {  
 width: 960px;  
 margin: 0px;  
 text-align: center;  
 color:#758a9d;  
 background-color: #faf4e6;  
 border-top:2px solid #545252;  
 }  
  
/* --- Versuch am footer ---  
div#footer p{  
 padding: 5px 0px 5px;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln