For a simple use case example check out below:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>A Question for The Stackflow Community</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
</head>
<body>
<script src="../js/cool-awesome-jquery.min.js"></script>
<div id="container"></div>
<div id="call-to-action">DUDE YOU NEED TO BUY THIS STUFF!!</div>
<div id="menu">
<button id="home">HOME</button>
</div>
<script>yada yada yada....</script>
</body>
</html>
I know that browsers offer some native relationship with the container div, or at least they can. But I see this use case alot in code, where the container div is created then closed. No special CSS is being used for it within the global.css file in this example. As you can see, no style tags are being used to add anything special either. So what I am asking is, why do this? What purpose does it serve?
As a sidenote, the body tag is outside of the container tag, whereas I would assume the inverse to be true, at least to follow what is expected as clean semantic markup. Any knowledge or feedback from the community is truly appreciated. A good answer deserves a good upvote for sure. Thank you!
-Cheers, Branden Dnae
too vague to pinpoint an exact answer, however overall the probable effect is to have the content outside of the container (typically) pinned atop the container (or at least pinned in front, even if hidden), ala position:fixed; either 100% of the time, like a banner/header, or perhaps only upon user interaction...so think like a lightbox.