Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 281
  • Last Modified:

CSS, web page formatting

Hello experts!

Please have a look at this code:


HTML

<form method="post" action="">
    <fieldset>
        <ol>
            <li class="email">
                <label for="email" >Email:</label>
                <input type="text" align="left"  id="email" name="email" title="Email address"/>
           
            </li>


CSS

fieldset {
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}


   
    fieldset label {
        float:left;
   
        display: block;
      }


   
    fieldset input[type="text"], input[type="password"] {
        border: 1px solid #ccc;
        padding: 2px;
        font-size: 1.2em;
        color: #444;
        width: 300px;
        float:left;
    }

What I want to achieve is to position my label and input field in one row, next to each other, nicely positioned with proper horizontal distances.

How can I do it?

Thank you!

panJames
0
panJames
Asked:
panJames
1 Solution
 
Chris StanyonCommented:
Try adding a width to the fieldset label. Also, because you are floating both of your elements (label and input), you'll need to clear them, so the following element sits below. Add a clear:both rule to the LIs


fieldset label {
   float:left;
   display: block;
   width:150px; //how wide do you want your labels
}

fieldset li {
   clear:both;
}

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now