Hallo liebe CSS´ler,
ich möchte mich gerne mehr mit Responsiven Webdesig in HTML und CSS befassen.
Ich bin das Tutorial von Grid durchgegangen und das klappt auch soweit ganz gut, nur mag der Internet Explorer mal wieder nicht mitspielen.
(https://pl.vc/rdigt)
Wie man sieht, ist im Firefox alles wie ich will und im Internet Explorer verschiebt sich ein DIV nach unten, doch warum?
INDEX.html
GRID.css
Vielen Dank für eure Hilfe.
Lg Matlox
ich möchte mich gerne mehr mit Responsiven Webdesig in HTML und CSS befassen.
Ich bin das Tutorial von Grid durchgegangen und das klappt auch soweit ganz gut, nur mag der Internet Explorer mal wieder nicht mitspielen.
Wie man sieht, ist im Firefox alles wie ich will und im Internet Explorer verschiebt sich ein DIV nach unten, doch warum?
INDEX.html
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<div class="head">
<div class="row clearfix">
<div class="headcolumn half">
TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="column fourth">
TEST2
</div>
<div class="column half">
TEST2
</div>
<div class="column fourth">
TEST2
</div>
</div>
</div>
</body>
</html>
GRID.css
CSS:
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box;mbox-sizing: border-box; background-color:#070C0A;}
html {font: 100%/1.5 "Open Sans", sans-serif;font-weight: 400;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
@media (min-width: 40rem) {html { font-size: 112%;}}
@media (min-width: 64rem) {html { font-size: 120%;}}
body {background-color: #fff; color: #555; padding: 0; margin: 0;}
.head {margin: 0 auto; max-width: 100%; width: 100%; margin-bottom:50px;}
.headcolumn {padding: 0; margin: 0; background-color:#555555;}
@media (min-width: 40rem) {
.headcolumn {margin: 0; padding-left: 1rem; padding-right: 1rem;}
.headcolumn.full { min-width: 100%; }
.headcolumn.two-thirds { min-width: 66.7%; }
.headcolumn.half { min-width: 50%;}
.headcolumn.third { min-width: 33.3%; }
.headcolumn.fourth { min-width: 25%; }
.headcolumn.flow-opposite { float: right; }
}
.container {margin: 0 auto; max-width: 100%; width: 90%; border-style: dotted; border-width: 5px;}
.column {padding: 0; margin: 0; background-color:#F2F2F2; border-style: double; border-width: 5px; }
@media (min-width: 40rem) {
.column {
float: left;
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Vielen Dank für eure Hilfe.
Lg Matlox