I'm currently working on a container div that houses two child divs: the first one, positioned to align with its parent's left border, contains a series of buttons while the second one holds the main content. In essence, it operates like a tab navigator, with the buttons situated on the left side.
The issue I'm facing pertains to the height of the buttons container—I want it to span 100% of its parent div. However, I don't want to assign a fixed height to the container div since I want it to adjust dynamically based on the height of its content.
Upon inspecting the fiddle below, you'll notice that the right border of the ul doesn't reach the bottom edge of the container...
Here is an excerpt of the code:
HTML
<div id="container">
<div id="buttons">
<ul>
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
<li><a href="#">button 4</a></li>
</ul>
</div>
<div id="content">
asdasdasdasdas<br>
...
asdasdasdasdas<br>
</div>
</div>
CSS
#buttons{
background: lightgray;
width: 150px;
float: left;
border-right: 1px solid black;
height: 100%
}
#content{
padding: 15px;
float: left;
}
#container{
/*-- adding fixed height here, works*/
/*height: 300px;*/
display: inline-block;
border-left: 1px solid black;
}
FIDDLE
Current solution implemented - http://jsfiddle.net/BeNdErR/kVcds/
Desired outcome without fixed height setting - http://jsfiddle.net/BeNdErR/kVcds/2/
Scenario where content is shorter than the buttons div - http://jsfiddle.net/BeNdErR/kVcds/8/
If you have any suggestions or solutions to address this particular issue, I would greatly appreciate your input.
Thank you in advance and best regards!