As suggested here, display: flex; is a modern alternative to floating stuff in divs and then chasing those divs with a div with clear: both; on it to make the wrapping div end below the stuff it is wrapping. Instead you just style the wrapping div and the children all behave themselves without you having to float them and without you having to put an extra div in there for a footer to make the wrapper behave. Behold:
<!DOCTYPE html>
<head>
<title>Whatever</title>
<style>
#wrapper {
display: flex;
background-color: blue;
margin: 10px;
padding: 10px;
}
#wrapper div {
background-color: pink;
margin: 3px;
padding: 3px;
}
</style>
</head>
<body>
<div id="wrapper">
<div>foo</div>
<div>bar</div>
<div>baz</div>
<div>qux</div>
</div>
</body>
</html>
Observe:
No comments:
Post a Comment