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 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts

    centering a float:left div

    hi everybody;

    is there a way to center this page without removing "float:left" and without adding an exact width somewhere..

    thank you..




    Code:
    <html>
    <head>
        <title>Page Title</title>
    
    <style type="text/css">
    
    
    .image {
        overflow: hidden;
        position: relative;
        float: left;
    }
    .image .cover, .image .cover img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
    
    </style>
    
    </head>
    <body>
        <div class="image">
            <img src="image.jpg" alt="Image" />
            <div class="cover"><img src="imageCover.gif" alt=""  /></div>
        </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Why do you need to apply a float on an element that need to get centered?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    What you could do is set a width on the div element and then after declaring the width, you can set margin to auto, this should center the div.

    As an example:

    Code:
    .image {width: 30em;
               overflow: hidden;
               margin: auto;}
    If you ever center things using this technique in the future, make sure to set a width on that element first otherwise margin: auto will not work.

    If you have problems come back and we can help more.

    Regards,

    LC.
    Last edited by LearningCoder; 05-29-2012 at 02:57 PM. Reason: Added information

  • Users who have thanked LearningCoder for this post:

    ali haydar (05-29-2012)

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Why do you need to apply a float on an element that need to get centered?
    i want the transparent imagecover.gif to cover image.jpg, and if i remove float:left, it doesn't cover the image if the image is wider than the browser screen..

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    What you could do is set a width on the div element and then after declaring the width, you can set margin to auto, this should center the div.
    thank you, i was looking for a solution without declaring a width but i guess i will use your technique, thank you very much..

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    No problem.

    What is the reason you do not want to set a width on the element?

    Regards,

    LC.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts
    for different images i will have to use different width's in this case, but when using float:left without declaring width, it covers every image beautifully no matter what width the image has..

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Why don't you give the images an id and set the individual width's as required?

    Regards,

    LC.

  • Users who have thanked LearningCoder for this post:

    ali haydar (05-29-2012)

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts
    yes, that will work
    thank you very much for your time..

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Anytime bud, I have had more than enough help from people on this forum, it's about time I started helping others! I can't explain a lot of things but if I find opportunity I like to help out!

    Regards,

    LC.
    Last edited by LearningCoder; 05-30-2012 at 08:24 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
    •