SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still struggling with form positioning

    I want to align two <select> lists next to each other without using table layout.

    I'd like them to be even spaced across the form.

    I'm not sure how to put space between them without using absolute positioning or a bunch of non-breaking spaces, neither of which seems very elegant.

    Inline position pushes them up against each other.

    I have similar issues trying to position two <input> tags, across a form.

    I notice that most people simply line form elements up vertically. This works, but gets a bit out of hand when there are two many form elements.

    I find myself reverting back to table layout to get forms to look the way I want them to look.

    Can anyone help me with this? Either with suggestions or pointing me to a good resource.

    Thanks,

    --Kenoli

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    My two preferred methods are float: left or display: inline-block. Feel free to post your code or a link to what you have, and maybe a screen shot of what you are aiming for (we need to know where things are meant to go). You certainly don't need a table for this.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    My two preferred methods are float: left or display: inline-block. Feel free to post your code or a link to what you have, and maybe a screen shot of what you are aiming for (we need to know where things are meant to go). You certainly don't need a table for this.
    OK. Below is some code using inline-block. Is the idea here that I use a margin like I have here to locate the second <select> group in relation to the first? I suppose I don't really need to float the first select group or assign an inline-block display to it. An option, I presume would be to float one left and one right. Margins could also adjust how close to the right margin the one floated right goes.

    Am I getting the idea?

    --Kenoli

    Code:
    <html>
    <head>
    <title></title>
    
    <style text/css>
    	
    #series {
    	float: left;
    	display: inline-block;
    }
    
    #series2 {
    	margin-left: 150px;
    	display: inline-block;
    }
    	
    	
    </style>
    
    
    </head>
    <body>
    
    <select id="series">
    <option value="1" onclick="[ajax function]">First</option>
    <option value="2" onclick="[ajax function]">Second</option>
    <option value="3" onclick="[ajax function]">Third</option>
    <option value="4" onclick="[ajax function]">Fourth</option>
    <option value="5" onclick="[ajax function]">Fifth</option>
    <option value="6" onclick="[ajax function]">Sixth</option>
    </select>
    
    
    <select id="series2">
    <option value="1" onclick="[ajax function]">First</option>
    <option value="2" onclick="[ajax function]">Second</option>
    <option value="3" onclick="[ajax function]">Third</option>
    <option value="4" onclick="[ajax function]">Fourth</option>
    <option value="5" onclick="[ajax function]">Fifth</option>
    <option value="6" onclick="[ajax function]">Sixth</option>
    </select>
    
    
    </body>
    </html>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kenoli View Post
    Am I getting the idea?
    That looks fine to me, although you don't need float and inline-block together ... just choose one or the other.

    In terms of getting this to play nicely with the rest of your form elements, though—and assuming you use floats—it might be better to wrap these two selects in a containing div with overflow: hidden; so that other form elements don't fall out of position around the floated items.


Bookmarks

Posting Permissions

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