Hi 
ich hab mir das mit dem Float durchgelesen und probier grad bissi rum. Auch das Thema Positionierung ist noch interessant, da ich erwäge die Navi beim Scrollen bis zum oberen Bildschirmrand laufen zu lassen und dort dann zu fixen, da muss ich noch bissi rumexperimentieren.
Mein ie.Problem hat m.E. aber nichts mit Float zu tun und ich weiß wirklich nicht woher es kommt bzw. wie ich es angehe.
Die Bilder habe ich angehängt.
Bei Safari/Opera/Chrome/Firefox sind die Rahmen wie sie sollen, links und rechts am Main und ich hab nen Abstand zum Rand.
Der ie hält weder Abstand noch macht er die Rahmen hin sondern zerhaut die irgendwie. Rechts ist gar keiner, der Linke wird nur zum Teil angezeigt (und nach oben verschoben bzw nach rechts innen unten verschoben. Siehe Bild
iehtml-seminar.de/woltlab/attachment/1141/
chrome html-seminar.de/woltlab/attachment/1142/
hier der Code:
html
<!DOCTYPE html>
<html lang=de>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Impressum</title>
<link rel="stylesheet" type="text/css" href="css/formate.css"/>
</head>
<body>
<header>
Seitenkopf
<nav>
navi
</nav>
</header>
<main>
<article>
<h1>Impressum ■ </h1>
<br/>
</p/>
</p>Ich übernehme keine Haftung für die Inhalte der eingebundenen Links.<br/>
Für die verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.<br/>
</p>
<p>Unser Internetauftritt enthält eine Altersfreigabe. Die Altersgrenze beträgt 0 Jahre.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></article>
</main>
<footer >
<nav>
fußnav<br/>
und <br/>
einige<br/>
wetere<br/>
angaben<br/>
</nav>
</footer>
</body>
</html>und css
body {
width: 90vw;
background-color:#fff7ee;
max-width:1500px;
margin: 2em auto 0 auto;
}
header {
width: 100%;
padding: 0;
margin: 0 0 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 2em solid #193c67;
}
nav {
width: 100%;
padding: 0;
margin: 0;
}
main {
width: 100%;
color:#666;
text-align:left;
width: 100%;
padding: 2em 7.5% 2em 7.5%;
margin: 0 auto 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-left: 0.14em solid #e1e1e1;
border-right: 0.14em solid #e1e1e1;
}
article {
width: 100%;
padding: 0;
margin: 0;
}
footer {
width: 100%;
color:#666;
text-align:center;
padding: 0 0 0 0;
margin: 0 0 0.5em 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 0.14em solid #e1e1e1;
border-left: 0.14em solid #e1e1e1;
border-right: 0.14em solid #e1e1e1;
}
* { font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:0.95em;
line-height: 1.5em;
}
small {
font-size:80%
}
h1 { font-size:140%; font-variant:small-caps; color:#193c67 }Das Dreispaltendesign hab ich jetzt mit Felxbox gelöst wobei die Spalten die Felxitems sind, also keine eigenen Flexboxen. Vom Design her musst ich ne neue Bildschirmgröße einfügen, da es "ätsch" aussah, wenn die dritte Spalte nach unten gerutscht ist, daher hab ich ausnahmsweise eine feste Breite vergeben, die dann Größenabhängig die mittlere Spalte anders darstellt (ohne Rahmen rechts).
Ich kann mir das nicht erklären, Hab da auch schon rumgefeilt, aber der ie will einfach nicht...
hatte jetzt schon von allen seiten den "Footer" genommen ind ne divbox "seitenfuss" eingefügt...