Question

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:

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?

Answer 1

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/