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
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS align 3 elements

    I'm trying to get 3 elements evenly spaced on the same line.

    Code:
    <div style="width:650px;height:385px;">
    	<div style="float:left">Item 1</div>
            <div>Item 3</div>
    	<div style="float:right;">Item 2</div>
    </div>
    I had it working fine for 2 items but I can't get a 3rd to evenly space itself between 1 and 2. I've tried every combination of placement styles that I could think of. I know it can be done with tables but I want to try and stay away from those.

    Any help is appreciated.

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

    hopefully this will put you out of your misery.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        width:650px;
        height:385px;
     }
    #right {
        float:right;
     }
    #left {
        float:left;
     }
    #center {
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <div id="right"">Item 2</div>
     <div id="left">Item 1</div>
     <div id="center">Item 3</div>
    </div>
    
    </body>
    </html>
    coothead

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hrm, that works exactly how I need it to until I stick it into my actual site. I guess I need to play around with the other CSS code on my site to see whats causing it to act screwy. Thanks coot.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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