I am currently exploring different methods to create a specific layout using CSS only:
https://i.sstatic.net/rcPih.png
Essentially, I need the height of the "title" block to adjust according to the size of the image in the "logo" block and position this block directly next to the "logo" block. The same requirement applies to the "menu" block, which should be positioned directly below the "logo" block with identical width.
I attempted to implement it with inline styles for demonstration purposes: 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...
</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 challenge lies in creating dependency among blocks within the same parent element, which proves difficult as fixing one parameter (height/width) limits the other. How can this be achieved effectively?
P.S: While I am aware of the table approach, I aim to explore alternative methods as advised in various resources on this subject.