Floating divs with 'auto' width...?

[esti]

Hello everyone,

Does anyone know the solution to this problem I've got? I'm sure its simple but I'm a bit of a newbie when it comes to css.

I'm trying to remake this page of mine: www.stevebishop.org/work.html

but make the images 100% in height (counting the text at the bottom - so really I'm making the containing div 100% in height).

I'd like to use auto width as images wont necessarily be the same size (landscape, portrait, etc). The problem I've run into is to do with floating these containing divs side by side without specifying the width, like in my existing version.

Here's what i've done so far:www.stevebishop.org/resize/index.html

It looks correct in my version of FF (8.0.1), but the containing div doesn't seem to clear the previous one in Chrome and on other versions of FF.


Does anyone know how to get this behaviour of divs floating as I'm trying to get them but done correctly?

[Frankie]

Could it be a matter of having given the same ID to two elements? In that case, the ID should be a class; IDs must be unique.

[melloorr]

Maybe what I put in this thread would help you: http://www.codingforums.com/showthread.php?t=249947

But I will quote it here:

You should have containers, for example, image1, text1 and image3 will be in 1 container, image 2 will be in another and footer in the 3rd. To make container 1 and 2 to float next to each other, you need to set their width, but make sure that when they are added together, they do not exceed the width you have set your website to.

So, you should make the 2nd container (image 2) float right, but in your html file, it should be BEFORE the 1st container and if you have your widths properly, container 1 shouldn't need to float: left;
example, this will make container2 float beside container1:

#container1{
    width: 70%;
    height: 200px;
    padding: 0;
    margin: 0;
}

#container2{
    width:30%;
    height: 200px;
    float: right;
    padding: 0;
    margin: 0;
}

But, ONLY if you have container2 first in the html code. And I think I am also right in saying that this would also work for IE 6/7 too

Now, you should be able to use some of the same code to align the images in container1 too

[esti]

Thanks for your suggestions.

I'm wondering of there is a way to do this without specifying widths because it needs to be on auto to correctly scale the image which has a % based height.

[melloorr]

Well, if the height is based on %, then I would assume the width would be the same percentage no matter how it was scaled?

[esti]

Hmm I guess % widths could be used but seems long concidering each image won't necessarily be the same ratio height to width.

So basically my idea can't be done?

I'm surprised there's not a way that a containing div cant stretch around an image inside.

[melloorr]

If you scale the height by 50%, then to keep the image the same size, the width would need to be 50%, it should work

[esti]

Thanks for the suggestions, but the images are scaled 100% of the height of the browser so they can fill the screen no matter what resolution the user has.

Won't putting 100% for the width then make the images 100% of the width.i.e. stretching them out of proportion if it were a portrait oriented image say?

[esti]

Ok - so I've made some progress and got to a point where I think it works in every browser, except maybe IE8.

But... Now there's a problem with Chrome on both Mac and PC where it won't load the page properly sometimes. If you go to: www.stevebishop.org/resize/index.html then it works as expected, but if you click on 'work' in the top left it doesn't space the images out correctly even though it's loading the exact same page.

Any thoughts? Can't seem to dig up much on the net about that.