Dynamic width working with percentage

Question

I've never worked with percentage layouts. Of course, I already study them, but without any practice. So, I ask you all to see my layout's screenshot and tell me: How can I display the same layout, in different percentage conditions and, finally, without lost any layout quality? I mean, without div's superposition and blank spaces.

As you can see, my layout 'r ok. But, in 1024x768, we have a little spacing. On the other hand, in 1920x1080, we have exceeded space between the layers. I'm using CSS to do this. Look:

section#FeedDeck {
   width: 100%;
   height: 100%;
   float: left;
}

.FeedContainer {
   width: 100%;
   float: left;
   padding-bottom: 25px;
   border-bottom: 1px solid #b9b9b9;
}

.LeftFeedSide {
   width: 10%;
   float: left;
}

.CenterFeedSide {
   width: 80%;
   float: left;
}

.RightFeedSide {
  width: 10%;
  float: right;
  text-align: right;
  font-size: 12px;
}

.RightFeedSide a {
    width: 100%;
    float: left;
}

My HTML:

    <section id="FeedDeck">

            <div class="FeedContainer">

            <div class="LeftFeedSide">

                <img src="60x60.jpg" alt="" />

            </div>

            <div class="CenterFeedSide">

                <header id="FeedContent">
                    <h1>Anne Hathaway</h1>
                    <h4>Diretora de Design</h4>
                </header>
                <p>
                    Can you fix a broken drug company research lab?
                </p>
                <p>
                    Jack Scannell, the European pharmaceuticals analyst at
                     Sanford C. Bernstein, recently held a conference on the future
                     of drug research and development. On the last day, he had representatives
                     from two of the most successful drug development organizations on the planet:
                     Sean Bohen, who heads early resaerch and development at Genentech, part of Roche,
                     which has had a legendary string of cancer drug successes; and Mads Krogsgaard Thomsen,
                     the chief scientific officer at Novo Nordisk, one of the dominant players in diabetes and
                     the best-performing big pharma stock over the past decade. This story is based on a transcript
                     of their talks.
                </p>

            </div>

            <div class="RightFeedSide">

                <a href="#">#1</a>
                <span>há um minuto atrás</span>

            </div>

        </div>

    </section>

Answer 1

The div container that has border:1px solid red; on your image. I suppose it have 80% width or something... try to give it a max-width:1000px; aswell

Edit

I think i misunderstood! You illustrated the problem with some arrows, did not see that! Making a jsfiddle for you, one moment.

Update - Here it is

http://jsfiddle.net/uaJCU/2/

the left column has a fixed width, and the rest is percentage.

HTML

<div id="container">
    <div id="paddingFix">
         <div id="left">
         </div>
        <div id="right">
        </div>
    </div>
</div>​

CSS

#container {
   width:90%;
   margin:0 auto;
   height:40px;  
}
#paddingFix {
    padding-left:80px;
    position:relative;
}
#left {
    position:absolute;
    left:0px;
    top:0px;
    height:40px;
    width:80px;
    border:1px solid black;
}
#right {
    height:40px;
    border:1px solid blue;   
}
​