I have a follow-up question regarding the same topic. How can I edit it to move up in the list or does that happen automatically?
Now, onto the main question - I have an image and an input box both contained within a span, and I want to display them next to each other.
The image is 48x48 pixels and the input field should fill the remaining width. Currently, the code does not break when zooming, which is how it should be.
Adding width: 100%; to the input box causes it to break when zooming, which is not the desired effect. I want it to fill 100% of the remaining width without breaking.
Here is the HTML code:
<div id="vault_chat">
<div id="vault_chat_header">
<span class="user_avatar"><img src="<%tdir%>img/default_avatar.png" alt="Default Avatar" /></span>
<span class="vault_chat_text_field"><input type="text" value="Enter a message..." /></span>
</div>
</div>
And here is the CSS code:
#vault_chat {
}
#vault_chat_header {
height: 48px; // I tried setting a fixed height here but it overflows the header.
}
.vault_chat_text_field input[type=text] {
vertical-align: top;
}
.user_avatar img {
width: 48px;
height: 48px;
}
If you have a solution, please provide a demonstration in a fiddle for me.