CODEWITHSUNDEEP
htmlcss
kamil1995b
kamil1995b

Reputation: 151

Resize content to window size

I am designing a new website (for now it's far from anything) but I am struggling to resize the content inside it, to the actual window size. Pictures speak a thousand words. The first picture is the correct way of how it should be, the one below is how I've got it when I resize the window.

enter image description here

enter image description here

<div class="header">
<div class="hdrmast-topbar">
    <div class="container">
        <span>Test :: Link 1 | Link 2</span>
    </div>
</div>

I am going to have two bars in the header section, one of them is the hdrmast-topbar present in the code. The parent will be fixed and will move with the scroll. However, I want the content to resize with the window, like here for example: http://incub.ro/

At the moment, the header is in relative position state, as I was experimenting with this matter.

/* 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.

Upvotes: 1

Views: 4151

Answers (2)

TryingToImprove
TryingToImprove

Reputation: 7407

You could give the container a max-width of 1120px, and a width of 100%.

​.container{
    margin: 0 auto;
    background:blue;
    max-width:1120px;
    width:100%;
}​

JsFiddle: http://jsfiddle.net/tDjA9/2/embedded/result/

Hope this helps, and that I have understood your question correct.. :-)

Edit--

To get the same effect as the website you posted, you properly want to use position:fixed instead.

I have created a new jsfiddle to show this. http://jsfiddle.net/tDjA9/6/embedded/result/ :-)

Upvotes: 2

Andrea Ligios
Andrea Ligios

Reputation: 50193

Just remove 

.container { width: 1120px;

use width: 100%; instead...

Upvotes: 2

Related Questions