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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2012
    Posts
    142
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Centering divs with a left float

    On the site below I have the boxes with a float:left but when at just the right zooming where the right div/box is pushed off to the next line there is a big space to the right obviously. Is there a way to center these divs so there is equal space left and right no matter the zoom on the page?

    http://www.pbreplacementcushions.com/

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    try % widths

    Seven (7) boxes is a lot. But with say three (3), you could figure something less than 33% (to allow for margins and padding). With four (4) something less than 25%.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello again taymag,
    Haven't we gone over this once already? It's just one solution but, since it works I'm surprised you didn't try it...
    //...maybe I'm mis-remembering though.

    Try making your CSS look like this -

    Code:
    .entry-content {text-align: center;}
    
    .product-box {
        box-shadow: 0 0 13px #808080;
        display: inline-block;
       /* float: left; */
        height: 300px;
        margin: 15px;
        padding: 10px;
        text-align: center;
        width: 370px;
    }
    There are other solutions if you're not using that due to some conflict I'm not seeing on my end, .js for one. I think this is a very good method of doing what you're asking though.
    Last edited by Excavator; 02-14-2013 at 12:46 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Mar 2012
    Posts
    142
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello again taymag,
    Haven't we gone over this once already? It's just one solution but, since it works I'm surprised you didn't try it...
    //...maybe I'm mis-remembering though.

    Try making your CSS look like this -

    Code:
    .entry-content {text-align: center;}
    
    .product-box {
        box-shadow: 0 0 13px #808080;
        display: inline-block;
       /* float: left; */
        height: 300px;
        margin: 15px;
        padding: 10px;
        text-align: center;
        width: 370px;
    }
    There are other solutions if you're not using that due to some conflict I'm not seeing on my end, .js for one. I think this is a very good method of doing what you're asking though.
    No, before you helped me with the box at the top of another page and floating them. This looks much better! I dont think I have ever used inline-block. Thank you! Very helpful.


  •  

    Posting Permissions

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