Pixels and percentages - issues when resizing browser

any help here would be great.

I'm simply trying to place a header that stretches 100% of the screen. Inside this header is another div containing text. What i have looks fine at full screen, but when i resize down the text stacks on top of each other to accommodate the percentage.

If i set the container width to pixels instead of percentage, the header doesn't stretch the full length of the window unless i specify an exact pixel amount like 1463px - this doesn't seem right because while it may be appropriate for my laptop/screen dimensions i feel like it wouldn't work on a bigger screen with a maximized window.

I just want everything in my container to be able to be positioned according to the 100% of the browser width and height, but using percentages isn't allowing me to fix the elements so they stay put during resize. I've been working with percentages mostly and am having great difficulty keeping them fixed on resize as opposed to pixel dimensions, basically because using percentages is ensuring that my content is taking up 100% of the browser window, whereas I can't be sure with this when using pixels.

   html, body {
       height: 100 % ;
       width: 100 % ;
       padding: 0;
       margin: 0;
   }

   .container {
       width: 100 % ;
       height: 100 % ;
       margin: 0 auto;
   }

   #
   topbar {
       height: 25px;
       background - color: #000000;
    width: 100%;
    }

    # topbartext {
           font - family: times;
           color: #ffffff;
           font - size: 11px;
           text - align: center;
           padding: 5px;
       }

The text is what is moving during resize - when I make the window smaller the text just stacks on top of eachother in order to still fit the screen. I don't want it to do this - i just want it to be fixed and not resize.

HTML :

<body>

    <div class="container">

        <div class="header">
            <div id="topbar">
                <div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *<a href="#">FULL CONDITIONS</a>
                </div>
            </div>
        </div>

    </div>

</body>

Solution

Percentages is best for this.

If you want the text to remain in one line you can add the following to your html and css:

html...

<div id="topbartext" class="topbartext">

css...

.topbartext {
  white-space: nowrap;
}

Note that:

In css it is better practice to use a class (.topbartext) rather than the id (#topbartext).
Using this method will mean that if you make your page narrower than the text you will have a horizontal scrollbar added (not ideal). You are probably better off allowing the text to wrap in which case you will need to remove the height: 25px;.