One of the challenges of web design/implementation is that elements typically do not have an intrinsic height. Make the browser narrower and the text will reflow and take up more vertical space. Another challenge that we've dealt with is that CSS was a presentation language and not really great for layout. That is to say CSS is good a setting colors, sizes, margins, etc, but not so good at positioning things on the page.
In the past, positioning two elements side-by-side was non-trivial to say the least. Typically you would use floats to float an element left or right. But floats take an element out of the normal document flow (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow) and they are no longer are relevant to their parent containers height calculation.
All of this changed in the past two years with browser support for two new CSS display property values - flex and grid. These properties are attached to a containing element and effect its immediate child elements. I think what you are trying to achieve is shown in the example below. The page has a header, footer with a left hand navigation and some content to the right. I've applied borders and background colors so you can easily see the different elements.
display: grid has been applied to the container div which holds the nav element and the content div. "grid-template-columns: 1fr 3fr;" sets up a 1/3 division of the content div width.
I've used display flex to horizontally and vertically center the footer text - again something that was often problematic before flex.
The amazing Jen Simmons has a great series of videos explaining and exploring display: grid available for free on Youtube at: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
And the simple awesome Rachel Andrews has written extensively about flex and grid on smashingmagazine.com
- https://www.smashingmagazine.com/2018/05/guide-css-layout/
- https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/
- https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/
Her author page with all her articles is at: https://www.smashingmagazine.com/author/rachel-andrew/page/2/
Two great overviews:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://css-tricks.com/snippets/css/complete-guide-grid/
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Website</title>
<style>
.site-header, .site-footer {
border: 1px solid red;
min-height: 50px;
background-color: #999;
}
.site-footer {
display:flex;
justify-content: center;
align-items: center;
}
nav { background-color: #dde; }
.content {
padding: 1em;
background-color: #edd;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
</style>
</head>
<body>
<div class="page-frame">
<header class="site-header">
<h1>Forcing a child div</h1>
</header>
<div class="container">
<nav>
<ul>
<li><a href="#">Nav link 1</a></li>
<li><a href="#">Nav link 2</a></li>
<li><a href="#">Nav link 3</a></li>
</ul>
</nav>
<div class="content">
<article>
<h2>Content Title</h2>
<p>Content here.</p>
<p>More content Content here.</p>
</article>
</div>
</div> <!-- end .container -->
<footer class="site-footer"><a href="https://www.wyzant.com/match/tutor/86262716">Lee M.</a></footer>
</div> <!-- end .page-frame -->
<body>
</html>
