I could really use some help with my CSS skills:
Here is the HTML code I am working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
</div>
<div class='clearfix'></div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>
The issue I'm facing is that the new_div is not displaying correctly. The background color is missing, and the height and width are not as expected.
If I remove the following line from the CSS, everything works fine:
float: left;
I've tried adding a clearfix div as suggested, but it hasn't resolved the problem. Can anyone offer some guidance? I've been stuck on this for hours now... :(