I'm facing an issue with floating multiple DIVs and allowing them to break out of a containing div. Below is an example of my code:
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<style>
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
div.outer {
width:300px;
height:300px;
border:3px solid #000;
overflow:visible;
padding:10px;
}
div.mid {
overflow:hidden;
border:1px solid #000;
padding:0;
width:485px;;
}
div.inner {
width:150px;
height:100px;
background:#EDEDED;
border:1px solid #C0C0C0;
float:left;
margin:5px;
}
</style>
</head>
<body class="landingPage">
<div class="outer">
<div class="mid">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
</body>
</html>
While this setup works well, the problem arises when I don't know the number or width of "inner" DIVs in advance. Therefore, I can't specify the "width" property in the div.mid CSS. Removing the width causes the inner DIVs to wrap, which is not desirable.
Can anyone provide a solution to this? It's important to note that the box-sizing property must be retained.