I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution.
This results in an unsightly amount of space. The divs that extend beyond the row drop down to the next line and their height is based on the bottom of the div above them.
Is there a way, using HTML, CSS, or JavaScript, to work around this issue? There are not many constraints. In practice, each child div would have its own id, but for simplicity, I've left them as they are.
#parent {
height: 600px; width:600px;
}
.childsmall
{
background-color:#0F0; height: 100px; width: 100px; float: left; margin: 10px;
}
.childmed
{
background-color:#0FF; height: 150px; width: 150px; float: left; margin: 10px;
}
.childlarge
{
background-color:#000; height: 200px; width: 200px; float: left; margin: 10px;
}
</style>
</head>
<body>
<div id="parent">
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childmed"></div>
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childlarge"></div>
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childmed"></div>
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childsmall"></div>
<div class="childmed"></div>
<div class="childlarge"></div>
</div>
</body>
</html>