Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Floating divs with 'auto' width...?

    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?
    Last edited by esti; 01-27-2012 at 11:06 AM. Reason: wrong url

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    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.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    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:

    Code:
    #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

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Well, if the height is based on %, then I would assume the width would be the same percentage no matter how it was scaled?

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    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

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by esti; 02-08-2012 at 12:09 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •