How align div to a form field?


Tags: html,css,forms,alignment,field

Problem :

Currently I have the following HTML code.

            <div class="field">
            <label>E-mail address: </label>
            <input type="text" id="email" name='email' style="width:200px;"></input>
            <span class='warning' id="emailWarning" > </span>
            <div class="tip" id="emailTip"></div>

        </div>

However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field. How should I do this using HTML and CSS?

Here's what is looks like now: http://jsfiddle.net/pEJMD/embedded/result/



Solution :

This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.


    CSS Howto..

    How to Inherit grandparent CSS not parent?

    How do I simulate a hover with a touch in touch enabled browsers?

    How to change/remove CSS classes definitions at runtime?

    How to make a box expand a distance from the sides

    How do I change the display position from absolute to relative?

    How to align an icon to the right of content

    How to align two images in html/css

    How to keep an element :active even after clicking

    How to change nav text color when scrolled over other div anchors in the page

    How to make a span tag wider with an alphabet inside?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How to increase the width of my template? [closed]

    How to center my menu bar with css. (I am using Microsoft Expression Web 4)

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to remove the empty space between divs in CSS?

    CSS - How to line up buttons?

    How to display an Image after the main page

    How to create round plus minus using css?

    How can I make jQuery's draggable function expand the container?

    How to have a backgroud image 100% width / height inside a
  • ?
  • Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?

    How to strike through obliquely with css showing the text on top of the strike through

    In a responsive layout how can I get divs to shrink uniformly?

    How can I push surrounding elements off screen when enlarging one?

    How to define a CSS fontface?

    css ul li nested menu with a padding. How on hoover retain width of the menu?

    How to build a CSS template from scratch

    How a checkbox will trigger another input element in html via javascript?

    How to prevent an absolutely positioned element to affect the scrollbar?