CSS, web page formatting

Posted on 2011-10-02
Last Modified: 2012-05-12
Hello experts!

Please have a look at this code:


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


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

    fieldset label {
        display: block;

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

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!

Question by:panJames
    1 Comment
    LVL 42

    Accepted Solution

    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 {
       display: block;
       width:150px; //how wide do you want your labels
    fieldset li {

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Suggested Solutions

    Title # Comments Views Activity
    CSS Alternate row colors 8 31
    tweaks to widgets on home page 17 30
    Bing Maps 1 23
    Overlay image or texture over text and png files 5 32
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now