Seeking a solution to have the image fill up the remaining space in the .container class
I attempted setting the width of the image in CSS to width: 100%, but encountered two different results:
Image with attribute set: https://ibb.co/9yKJgvF
If I remove the attribute, it produces this outcome: Image without attribute: https://ibb.co/K0HpkvJ
HTML
<header>
<div class="container">
<div id="logo_container">
<h1>Hotel<span>Inn</span></h1>
</div>
<img src="../images/sample1.jpg" alt="Image of Hotel">
</div>
</header>
CSS
header{
width: 100%;
height: 100px;
display: block;
background-color: lightblue;
}
.container{
width: 80%;
height: 100%;
display: block;
margin: 0 auto;
background-color: white;
}
#logo_container{
height: 100%;
display: table;
float: left;
}
#logo_container h1{
display: table-cell;
vertical-align: middle;
}
.container img{
height: 100%;
float: right;
Attempting to achieve an image height similar to Picture 2 while ensuring that it fills the available space until it reaches the words 'HotelInn'