How can I convert this static alignment of divs, etc. to always be dynamically aligned (i.e. be elastic) - HTML, CSS3

Problem

Here is the demo on JSFiddle.

I am using Twitter's Bootstrap framework - http://twitter.github.com/bootstrap/

What you will see in the stylesheet (on JSFiddle) is at the top are the appropriate classes from Bootstrap, but at the bottom are mine.

On JSFiddle, for some reason, everything doesn't look the way I want it to (I think it could be because of the static values and the smaller window on JSFiddle).

This is how it looks in my app:

Perfect static alignment

However, the issue is that it works when I specify specific widths (in pixels) for everything.

What I want to happen is, the layout stays the same regardless of the size of the browser window (the image doesn't have to resize automagically, although if that can be achieved with no JS that would be cool). So, in theory, the layout wouldn't have broken once I took it into JSFiddle.

Any ideas?

Problem courtesy of: marcamillion

Solution

You could do this:

First, get rid of the min-width that is set in the Twitter css

div.container-fluid {
    float: bottom;
    padding: 0px;
    min-width:0;    /* add this */    
}

Second, give the .content div a fluid width

div.container-fluid .content {
    border: 1px black solid;
    margin: 0px;
    width: 80%;   /* adjust this */
    float: left;
    padding: 10px;
}

Third, float the items in your form

div.row.profile_pic div.span5 {
    width: 120px;
    float:left;
    margin-right:1em;
}

div.span7{
    width:40%;
    float:left;    
}

Of course, you will need to adjust the values. I just picked some random #s.

Example: http://jsfiddle.net/ytSjc/1/

Solution courtesy of: Jason Gennaro

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.