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
    Dec 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering data without using tables

    I have a website I am trying to make to display network graphs for sites on our network. We want to be able to add sites to the page with ease without having to edit a hundred tables.

    I was able to get float:left/right to do what I want but I can't get it to center in the center of the screen.

    I found a blog suggesting to use left:50% and left:-50% on two divs to center it and it worked perfectly in IE, but the data was off the edge of the screen in Firefox and Chrome.

    Do I have any other options?
    Last edited by jghake; 12-17-2009 at 07:23 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jghake,
    To center an element you need three things:
    1. A DocType Declaration (see the link in my sig about doctypes)
    2. An element with a width
    3. That elements left and right margins set to auto
    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

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way to have a different width depending on the width of the browser?

    For example the browser is:
    less than 200px wide use width 175px
    between 200px and 400 px use 350px
    Above 400px use 525px

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I don't know of a way to specify different pixel widths but you could use percentages.
    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

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that and unfortunatly it doesn't work like I want with float. I have been able to get it all set up and looking beautiful in all browsers by setting a pixel width on the div everthing is in, but it won't scale from 1 item to 3+ when the screen gets narrower/wider.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hmm, floating and centering are two different things. How are you going to center a float:left;?
    I think we need to see what you're trying to do.
    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 to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am trying to center a float:left but only because there isnt a float center. This is what I want the page to do.
    Code:
                               Title
    -------------------------------------------------------------------
     
                    Item 1        Item2         Item3
             +-------------+ +-------------+ +-------------+
             |             | |             | |             |
             +-------------+ +-------------+ +-------------+
    
                    Item 4        Item5         Item6
             +-------------+ +-------------+ +-------------+
             |             | |             | |             |
             +-------------+ +-------------+ +-------------+
    
    
    
                         Title         
    ------------------------------------------------
    
                 Item 1          Item2        
             +-------------+ +-------------+ 
             |             | |             | 
             +-------------+ +-------------+ 
    
                 Item 3          Item4        
             +-------------+ +-------------+ 
             |             | |             | 
             +-------------+ +-------------+ 
    
                 Item5           Item6        
             +-------------+ +-------------+ 
             |             | |             | 
             +-------------+ +-------------+

    *Phew that was a pain to get looking right*
    Last edited by jghake; 12-18-2009 at 01:07 AM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    What are you centering then? The container the floats are in?
    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

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a <div id="main"> with a bunch of <div class="item"> divs.

    Each item div has a table, with two rows.

    Row 1 is text, row 2 is a picture linked to another page.


  •  

    Posting Permissions

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