SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning checkboxes to the right of text

    Hi,

    I am trying to align some checkboxes to the right of the text describing the checkbox options. Since the choices are of various lengths, I have to do something extra to get the checkboxes to line up. Here is what I tried as an experiment:

    HTML Code:
    <div class="div1">
       <span class="text">text</span>
       <span class="check_box">check box</span>
    </div>
    The way I understand the box model, <div>'s create 'block boxes', and block boxes are stacked on top of each other. On the other hand <span>'s create inline boxes which flow from left to right, one after the other.

    So, it seems like I should be able to assign a width to the <div>, of say 100px, and keep the first <span> on the left(it is by default), and move the second <span> all the way to the right of the containing <div>. However, I can't figure out how to do that.

    How do I do that, or should I be taking another approach to line up the checkboxes?

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Float the check box right and float the text left. You shouldn't have div's inside a <form> BTW. Just specify widths for your spans.

    You would also need to clear the floats by putting <br style="cleat: both;" /> at the bottom of the two.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the quick response.

    You shouldn't have div's inside a <form> BTW.
    Thanks, I didn't know that. What about <span>'s?

    I wasn't considering floats. Is that the way to go?

    I found one solution to my problem: position: relative. I had tried that before using right: 0. But, this time I used left: 30px. Why doesn't right: 0 work?

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found this in the HTML 4.01 spec:
    A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.
    Can you direct me to a seperation of style and content article that deprecates <div>'s in forms?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Why doesn't right: 0 work?
    It does work Its just that if you move the right corner of an element by zero pixels then it aint going nowhere (excuse the bad english lol)

    Read the FAQ on positioning to understand the often misunderstood aspects of relative positioning.

    Floating the element is the way to go Just float the check box to the right and let the text sit on the left. The check box will need to be before the text in the html if you are only floating one of them.

    Can you direct me to a seperation of style and content article that deprecates <div>'s in forms
    Very unlikely since divs are quite valid in forms I think mstwntd was having a bad day lol

    Paul

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floating the element is the way to go
    Ok. I was afraid it might escape.

    Great FAQ--thanks Paul.

  7. #7
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mstwntd
    You shouldn't have div's inside a <form> BTW.
    Um... why not? Its perfectly valid code.

    I'd probably do it this way:

    Code:
    <div class="formrow">
          <label for="checkybox">The text to go with the checkbox</label>
          <span><input name="checkybox" id="checkybox" type="" /></span>
          <div class="clearboth"></div>
    </div>
    Code:
    div.formrow { width: 500px; }
    div.formrow label { float: left; width: 75%; text-align: right; }
    div.formrow span { float: right; width: 20%; text-align: left; }
    div.clearboth { clear: both }
    Olly Hodgson
    thinkdrastic.net

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    arrrgh. I need a dog catcher.
    Floating the element is the way to go
    Ok. I was afraid it might escape.
    My worst fears have come to pass: the floats have escaped. All my checkboxes are on a single line over to the right, and all the text is on a single line over to the left:
    <form name="f1" method="post" action="">
    <div><span class="fleft">length</span><span class="fright"><input type="text" id="length" /></span></div>
    <div><span class="fleft">width</span><span class="fright"><input type="text" id="width" /></span></div>
    <div><span class="fleft">height</span><span class="fright"><input type="text" id="height" /></span></div>
    <div><span class="fleft">volumetric</span><span class="fright"><input type="text" id="answer" /></span></div>
    <span class="clear"></span>
    <div><input type="button" id="button1" value="calc"/></div>
    </form>
    and here is my css:

    .fleft{
    float:left;
    }
    .fright{
    float:right;
    }
    .clear{
    clear:both;

    I know...on my way to the faq.

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ha! I need 'clear: both' for every div.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes you must remember to clear floats when you want a new line

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I'm trying to produce a format like this:
    Code:
         First: [textbox]
      LastName: [textbox]
         email: [textbox]
    
                [SUBMIT button]
    ...but I can't get the css below to work in FF1.0: the text and the corresponding checkbox end up on different lines.
    Code:
    <html>
    <head><title></title>
    <style type="text/css">
    <!-- 
    
    div.row{
    	width: 700px;
    }
    
    span.col1{
    	width: 15%;
    	float: left;
    	text-align: right;
    
    	padding-right: 5px;
    }
    
    span.col2{
    	width:85%;
    	float: right;
    	text-align:left;
    }
    
    .clear_both{
    	clear: both;
    }
    
    -->
    </style>
    
    </head>
    <body>
    
    <div class="row">
    	<span class="col1">First name:</span>
    	<span class = "col2"><input type="text" name="firstname" /></span>
    	<div class="clear_both"></div>
    </div>
    
    
    <div class="row">
    	<span class="col1">Last name:</span>
    	<span class="col2"><input type="text" name="lastname" /></span>
    	<div class="clear_both"></div>
    </div>
    
    <div class="row">
    	<span class="col1">Email address:</span>
    	<span class="col2"><input type="text" name="emailAddress" /></span>
    	<div class="clear_both"></div>
    </div>
    
    <div class="row">
    	<span class="col1"></span>
    	<span class="col2"><input type="submit" name="submit" value="Submit"/></span>
    </div>
    
    </form>
    
    </body>
    </html>
    Also, how can I get put the Submit button a few lines below the last textbox? Position absolute?

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    A bit risky a standalone example of page without a DTD

    Try 84 %

    I have changed a few things to get the margins on the div to work in FF NS

    Its runs now in IE6 FF NS7 OP7 Moz 1.8

    PS i think you do not need to clear the float's because of the separete container (div's) see stript version

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <style type="text/css">
    
    div.row{
    	width: 700px;
    	height:24px;/* */
    }
    
    span.col1{
    	width: 15%;/*  */
    	float: left;
    	text-align: right;
    	
    	padding-right: 5px;
    }
    
    span.col2{
    	/* width:80%; */
    	float:left;
    	text-align:left;
    margin: 0 0 0 20px;
    }
    
    .clear-both{
    	clear: both;
    }
    .mt{margin:20px 0 0  0;}
    </style>
    
    </head>
    <body>
    <form action="x">
    <div class="row">
    	<span class="col1">First name:</span>
    	<span class = "col2"><input type="text" name="firstname" /></span>
    	<div class="clear_both"></div>
    </div>
    
    
    <div class="row">
    	<span class="col1">Last name:</span>
    	<span class="col2"><input type="text" name="lastname" /></span>
    	<div class="clear_both"></div>
    </div>
    
    <div class="row">
    	<span class="col1">Email address:</span>
    	<span class="col2"><input type="text" name="emailAddress" /></span>
    	<div class="clear_both"></div>
    </div>
    
    <div class="row mt">
    	<span class="col1">&nbsp;</span>
    	<span class="col2"><input type="submit" name="submitx" value="Submit" /></span>
    	<div class="clear_both"></div>
    </div>
    
    </form>
    </body>
    </html>
    Stript

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <style type="text/css">
    .row{
    	width: 700px;
    	height:24px;/* */
    }
    
    .col1{
    	width: 15%;/*  */
    	float: left;
    	text-align: right;
    }
    
    .col2{
    	text-align:left;
    	margin: 0 0 0 20px;
    }
    
    .clear-both{clear:both;}
    
    .mt{margin:20px 0 0 0;}
    
    </style>
    
    </head>
    <body>
    <form action="x">
    <div class="row">
    	<span class="col1">First name:</span>
    	<input type="text" name="firstname" class="col2" />
    </div>
    
    <div class="row">
    	<span class="col1">Last name:</span>
    	<input type="text" name="lastname" class="col2" />
    </div>
    
    <div class="row">
    	<span class="col1">Email address:</span>
    	<input type="text" name="emailAddress" class="col2" />
    </div>
    
    <div class="row mt">
    	<span class="col1">&nbsp;</span>
    	<input type="submit" name="submitx" value="Submit" class="col2" />
    </div>
    </form>
    </body>
    </html>
    Last edited by all4nerds; Jun 15, 2005 at 14:56.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ben beat me to it but I did this anyway so you can have 2 choices

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    div.row{
     width: 700px;
     overflow:hidden;
     padding:5px 0;
    }
    span.col1{
     width: 15%;
     float: left;
     text-align: right;
     padding-right: 1%;
    }
    span.col2{
     width:84%;
     float: right;
     text-align:left;
    }
    .row input.submit{margin-top:15px}
    .clear_both{
     clear: both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <form action="">
      <div class="row"> <span class="col1">First name:</span> <span class="col2"> 
    	<input type="text" name="firstname" />
    	</span> </div>
      <div class="row"> <span class="col1">Last name:</span> <span class="col2"> 
    	<input type="text" name="lastname" />
    	</span> </div>
      <div class="row"> <span class="col1">Email address:</span> <span class="col2"> 
    	<input type="text" name="emailAddress" />
    	</span> </div>
      <div class="row"> <span class="col1"></span> <span class="col2"> 
    	<input class="submit" type="submit" name="submit" value="Submit"/>
    	</span> </div>
    </form>
    </body>
    </html>

    The reasonn that moz was on another line was because you had a full 100% and then you added 5px padding. You canm't mix both and expaect them to add up. As Ben said above if you use 84% for one measurement then you can safely add 1% padding and still add up to 100%.

    Also it would be better and more semantic if you use the label tag instead of a span to mark up the form descriptions.

    A bit late but hope it helps anyway

  14. #14
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for both replies--they are both very informative. Thanks for the explanation Paul, and I'll try the label tag.


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
  •