Dependent blocks to the right and below the specified block - html

Question

I'm trying to find the best (or the good) way to implement such a structure using only CSS:
Basically, the height of "title" block depends on the size of the image in the "logo" block and this block should be presented exactly to the right from "logo" block. The same applies for the "menu" block, which should be located exactly under the "logo" block and have the same width.
I've tried to implement it in "hardcode" style, just for you to see what I mean: https://jsfiddle.net/DmitryGinzburg/kt7g1esu/
HTML:
<div id="top">
<div id="logo">
<img src="http://placekitten.com/200/100"/>
</div>
<div id="account">
Hello, abacabaUser
</div>
</div>
<div id="bottom">
<div id="menu">
<ul class="nav_bar">
<li>Anchor1</li>
<li>Anchor2</li>
<li>Anchor3</li>
</ul>
</div>
<div id="content">
Duis laoreet hendrerit aliquam. Ut cursus pellentesque ex in vehicula. Integer aliquet velit sed neque ultrices, id condimentum nibh accumsan. Sed maximus molestie nulla, et viverra eros sollicitudin id. Sed in dapibus mi, eget faucibus urna. Ut nulla lacus, cursus in lorem ut, rhoncus tempus velit. Vivamus lobortis egestas finibus. Proin eget mauris ut nisi euismod aliquam quis nec odio. Nulla ac turpis ac urna euismod porttitor. Proin lacus lectus, bibendum in mauris ac, sollicitudin laoreet mi. Quisque posuere lobortis imperdiet. Etiam id quam eu mauris congue faucibus sit amet non libero. Sed et massa in lacus posuere imperdiet vitae in lacus. Nulla mauris nisl, venenatis eu gravida sit amet, ultricies eu tellus.
</div>
</div>
CSS:
div {position: absolute;}
.nav_bar {
list-style-type: none;
margin: 0;
padding: 0;
}
#account {left: 500px;}
#menu {top: 100px;}
#content {
top: 100px;
left: 200px;
width: 400px;
}
The problem that I face is that the blocks can depend one on another only if they have the same parent and in this case it's hardly implementable, because this way I can fix only one parameter (height/width).
What is the supposed way to do it?
P.S: I know I can do it with "table" style, but that's what everybody is trying to avoid in every article I read about this topic.

Answer 1

CSS Tables would be the way to go here...not ACTUAL tables, but table layout.
.nav_bar {
list-style-type: none;
margin: 0;
padding: 0;
}
#logo,
#menu,
#account,
#content {
display: table-cell;
}
#account {
vertical-align: middle;
text-align: center;
}
#top,
#bottom {
display: table-row;
}
<div id="top">
<div id="logo">
<img src="http://placekitten.com/200/100" />
</div>
<div id="account">
Hello, abacabaUser
</div>
</div>
<div id="bottom">
<div id="menu">
<ul class="nav_bar">
<li>Anchor1</li>
<li>Anchor2</li>
<li>Anchor3</li>
</ul>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor turpis orci, a sodales arcu laoreet sit amet. Vestibulum nibh enim, iaculis sed risus in, egestas auctor mi. Ut a aliquam mauris, vel posuere est. Fusce a nisi vitae urna convallis
porta. Suspendisse sed tristique augue. Proin at mollis quam. Aliquam odio elit, auctor sed tortor sed, malesuada dignissim nulla. Ut ultrices neque urna, eu accumsan turpis viverra id. Nunc rhoncus ex eget urna facilisis tempor. Nullam id pretium
elit. Vestibulum libero lorem, semper sed ex sed, interdum dignissim tortor. Aliquam sollicitudin neque diam, non pharetra est hendrerit a. Vivamus hendrerit venenatis orci et scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Integer commodo risus libero, nec elementum orci hendrerit sed. Nunc eleifend sapien ac vehicula porttitor. Vivamus laoreet purus lectus, faucibus pretium erat fringilla ut. Etiam accumsan justo at metus porttitor condimentum.
Quisque vel lorem a lacus volutpat ornare vitae quis turpis. Suspendisse potenti. Nam cursus odio sed ipsum semper, sed interdum mi sollicitudin. Suspendisse rutrum justo at eleifend vestibulum. Maecenas ut urna nibh. Mauris eget turpis metus. Aenean
lobortis fermentum augue, vitae interdum justo ullamcorper nec. Donec viverra, nisl scelerisque iaculis suscipit, lectus odio fringilla massa, nec tincidunt neque velit vitae mi. Proin pharetra fringilla ligula. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Aliquam porta leo in dolor commodo, faucibus pretium elit fringilla. In eleifend lorem quis enim feugiat, id fringilla ipsum malesuada. Morbi non feugiat urna, ullamcorper tincidunt nibh. Nam lacinia,
velit sed ultrices faucibus, erat tortor tincidunt tellus, cursus imperdiet turpis ante eu arcu. Integer sed facilisis libero, vitae mattis nisl. Proin cursus, sem at tempor convallis, ligula ligula egestas erat, eget molestie justo elit vitae dui.
Praesent leo velit, luctus vitae suscipit id, placerat a velit. Proin posuere enim vel lobortis gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur bibendum dui quis velit ornare rhoncus.
Phasellus blandit vulputate ligula, at molestie ligula consequat sit amet. Mauris faucibus luctus mauris, in gravida nulla facilisis pellentesque. Nunc vitae odio rutrum odio hendrerit mattis eu eu tellus. Vivamus tincidunt, nulla et varius mollis,
dolor ligula viverra nibh, sed porttitor urna nisl nec quam. Duis laoreet hendrerit aliquam. Ut cursus pellentesque ex in vehicula. Integer aliquet velit sed neque ultrices, id condimentum nibh accumsan. Sed maximus molestie nulla, et viverra eros
sollicitudin id. Sed in dapibus mi, eget faucibus urna. Ut nulla lacus, cursus in lorem ut, rhoncus tempus velit. Vivamus lobortis egestas finibus. Proin eget mauris ut nisi euismod aliquam quis nec odio. Nulla ac turpis ac urna euismod porttitor.
Proin lacus lectus, bibendum in mauris ac, sollicitudin laoreet mi. Quisque posuere lobortis imperdiet. Etiam id quam eu mauris congue faucibus sit amet non libero. Sed et massa in lacus posuere imperdiet vitae in lacus. Nulla mauris nisl, venenatis
eu gravida sit amet, ultricies eu tellus.
</div>
</div>
CSS table layout is perfectly acceptable for non-tabular data BUT I do not think this is a perfect solution. If the menu were wider than the image it's width would take precedence but given current layout methods it's probably the optimal one.
CSS Grids, when they are properly supported, might be the ideal solution.