SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What am I missing? Form Layout

    Hey Guys

    I've recently created my first website using "Build your own website the right way." using HTML and CSS.

    I have just one question on my contact page:

    Modern British Art Collective-The Best Modern British Art delivered to your door

    I cannot get the text boxes to align.

    On my CSS I have input the form.contact label.fixedwidth commands recommended in the book and similarly in my HTML, the references to class="fixedwidth". The form itself also used Freedback and their code.

    Yet no matter what I try I cannot get the boxes to align neatly. What do I need to do!?

    Look forward to hearing from you and thanks for helping me out!

    jamesg

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this belongs in the CSS forum, but I'll try to give an answer.

    Put this in your CSS:
    Code CSS:
    .fixedwidth { display:block; width:200px; float:left; }

    The trick is to give the label a fixed width (hence the classname I guess... ), in my case 200px but maybe you should use a relative unit. To do that you have to give it a display:block and then a float:left to get the input fields on the same line again.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Moved to CSS forum

    I think the main problem was that you forgot to add a class of contact to the form element and so the styles missed the target

    I prefer to use inline-block for form labels as it avoids the clearing and snagging issues of floats.

    e.g.
    Code:
    label.fixedwidth {
        display:inline-block;
        vertical-align:middle;
        width: 220px;
        padding:0 20px 0 0;
        text-align:right;
        line-height:1.3;
    }
    textarea {
        vertical-align:middle
    }

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for coming back to me so quickly.

    Had no idea if it was a CSS or HTML problem but am very grateful its now sorted and the alignment is as I wanted it!

    jamesg


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
  •