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
    May 2012
    Posts
    25
    Thanks
    4
    Thanked 1 Time in 1 Post

    Box not displaying properly

    Hi all,

    I am trying to use the box property to center a div inside another div.

    The code I am using is below:-

    Code:
    .column-content-right-2{
    	height: 400px;
    	width: 50%;
    	float:left;
    		    /* Firefox */
    	display:-moz-box;
        -moz-box-pack:center;
        -moz-box-align:center;
    
        /* Safari and Chrome */
        display:-webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
    
        /* W3C */
        display:box;
        box-pack:center;
        box-align:center;
    }
    This works fine in Google Chrome but isn't showing properly in either IE or Firefox.

    Does anyone have any ideas what I'm doing wrong?

    Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Does anyone have any ideas what I'm doing wrong?
    Not giving us the complete code.
    Do you have a doctype?
    Is this the div your centering or is that div put into this div?
    Youth wants to know.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    4
    Thanked 1 Time in 1 Post
    Hi,

    The doctype i'm using is <!DOCTYPE HTML> which I believe is correct for HTML5?

    This is the CSS for the div that has another div centered inside it.

    Thanks

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Remove this
    float:left;
    add this
    border: 1px solid black;

    And add this so we can see
    <body>
    <div class="column-content-right-2"><div style="width:350px;height:100px;border:1px solid black;">This div is centered</div></div>
    </body>
    Last edited by sunfighter; 12-12-2013 at 09:29 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    probi (12-12-2013)

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    4
    Thanked 1 Time in 1 Post
    Hi,

    Thank's for that it has worked a treat in firefox. Still doesn't seem to want to play ball in IE though.

    Any other ideas?

    Thanks again for your help.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello probi,
    Looks like display: box; is from 2009 and there has been some updates to it, though I haven't found anything saying it's actually been deprecated.

    Look at the more modern version here.
    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

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    4
    Thanked 1 Time in 1 Post
    Hi Excavator,

    Thank's for the reply, do you have any suggestions on achieving what I'm trying to do a better way?

    Seems like I'm going about it the wrong way.

    Thanks

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there probi,

    here is another method for you to play with...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>boxes</title>
    
    <style>
    body {
        background-color:rgba(241,241,241,1.0);
     }    
    #outerbox {
        display:table;
        width:50%;
        margin:auto;
        background-color:rgba(255,255,255,1.0);
     }
    #innerbox {
        display:table-cell;
        height:400px;
        padding:20px;
        border:1px solid rgba(0,0,0,0.6);
        vertical-align:middle;
        box-shadow:inset 0 0 20px rgba(0,0,0,0.6);
     }
    #box {
        width:50%;
        border:1px solid rgba(0,0,0,0.6);
        margin:auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.6);
     }
    #box p {
        margin:20px;
        color:rgba(0,0,0,0.6);
     }
    </style>
    
    </head>
    <body>
    
    <div id="outerbox">
    <div id="innerbox">
    <div id="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis.
    </p>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    coothead

  • #9
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Very nice, coot
    Where the world once stood
    the blades of grass
    cut me still

  • #10
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks coothead provide good solution


  •  

    Posting Permissions

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