Hallo Leute!
Wenn ich diese Seite im Firefox-Browser öffne, springt die 5. Div aus der Content-Box und ordnet sich darunter ein.
Ohne Rahmen ist alles ok.
HTML
<!DOCTYPE html >
<html>
<head>
<title>Div-Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="keywords" content=""/>
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"/>
<link href="TEST-2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="content">
<div class="in-content"><p>1</p></div>
<div class="in-content"><p>2</p></div>
<div class="in-content"><p>3</p></div>
<div class="in-content"><p>4</p></div>
<div class="in-content"><p>5</p></div>
</div>
</body>
</html>
Alles anzeigen
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 800px;
height: 800px;
margin: 20px auto;
background-color: #C0C0C0;
}
.content {
width: 800px;
height: 100px;
background-color: red;
border: 1px solid #000000;
}
.in-content {
width: 150px;
height: 80px;
background-color: #8C8C8C;
border: 1px solid #000000;
float: left;
margin: 5px ;
margin-top: 10px;
text-align: center ;
font-size: 50pt;
}
Alles anzeigen
Ich habe die CSS mit CSS Lint.net überprüft, und die Warnmeldung bekommen: "Beware of broken box size | Using width / hight with border can sometimes make elements larger than you expekt"
Wie kann ich die inneren Divs rahmen, ohne den Rahmen zu sprengen?
Gruß!