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;   
}
​

Answer 2

It's normal to have white space when you extend to bigger resolutions; You need to understand one thing:

The fact that you're using percentages for your columns/layout, doesn't mean ALL the elements become automatically fluid: Images for example. In order to have fluid images you'd need the max-width:100% "hack/fix" http://www.alistapart.com/articles/fluid-images/ . This way your images will shrink automatically, keeping the original ratio/proportions, and will expand till their original size. Check http://www.gplus.gr/blog/ - play with the window size, and you'll see what I mean.

Then, nothing stops you to have a semi-fluid layout: if you think the right column shouldn't change width, then set it in pixels, or set a max-width:200px (for example) on it, this way it will expand until the 200px limit.

Answer 3

The layout is perfectly working, only the content size changes as the resolution changes. You should not use pixel sized elements (fonts, pictures). That way the content will resize with resolution.

Check this question.