I am currently in the process of designing a new website, but I am facing difficulties with resizing the content to fit the actual window size. As they say, a picture is worth a thousand words. The first image shows how it should look, while the one below demonstrates the issue when I resize the window.
<div class="header">
<div class="hdrmast-topbar">
<div class="container">
<span>Test :: Link 1 | Link 2</span>
</div>
</div>
In the header section, I plan to have two bars, with one being the hdrmast-topbar as shown in the code snippet. The parent element will be fixed and scroll along with the page. However, my goal is to make the content resize automatically according to the window size, similar to what can be seen on this example website:
Currently, the header is set to a relative position, as I am still experimenting with different approaches.
/* Header */
.header { min-width: 100%; position: relative; }
.hdrmast-topbar { background-color: #000; width: 100%; max-height: 25px; font-size: 11px; color: #fff; font-weight: bold; text-align: right; padding-top: 5px; padding-bottom: 5px; }
.hdrmast-topbar span { margin: 0; padding: 0; }
/* Global */
.container { width: 1120px; margin: 0 auto; }
Thank you for your assistance.