CODEWITHSUNDEEP
cssformsalignment
Lacer
Lacer

Reputation: 5968

CSS Align label + field + text

Trying to create a form without tables having a couple of issues. Any help would be appreciated.

can someone show me how to get to this
http://bit.ly/Y7q7Hu

right now it's this
http://bit.ly/ZLauE1

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
<style>


.myfields label, .myfields input{
  display:inline-block;
}

.myfields label {
  width:200px; 
  vertical-align: top;
}
</style>

</head>
<body>
<form>
<fieldset class="myfields">
                <div>
                    <label>Label 1<font color="red">*</font>:</label>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit eu metus malesuada malesuada. Praesent varius velit a libero varius congue. Donec fringilla nulla id sapien accumsan tincidunt in vel orci. Nam malesuada risus et mauris hendrerit tempus. Sed tincidunt fermentum tortor eget auctor. Donec at mauris non mi lobortis mollis. Vestibulum vitae enim massa, et rutrum ligula. Aliquam tempor rhoncus enim vitae porttitor.
                    <input id="agreement" type="checkbox">Accept
                </div>  

            </fieldset>
        </form> 
</body>
</html>

thanks

Upvotes: 0

Views: 1803

Answers (2)

Dan Nelder
Dan Nelder

Reputation: 16

I would change the way your divs are layed out:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
<style>
fieldset{border:none;}

.myfields label, .myfields input{
  display:inline-block;
}

.myfields label {
  width:200px; 
  vertical-align: top;
}
</style>

</head>
<body>
<form>
<fieldset class="myfields">
                <div style="float:left;height:300px;width:100px;">
                    <label style="float:left;">Label 1<font color="red">*</font>:</label>
                </div>
                    <div style="width:300px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit eu metus malesuada malesuada. Praesent varius velit a libero varius congue. Donec fringilla nulla id sapien accumsan tincidunt in vel orci. Nam malesuada risus et mauris hendrerit tempus. Sed tincidunt fermentum tortor eget auctor. Donec at mauris non mi lobortis mollis. Vestibulum vitae enim massa, et rutrum ligula. Aliquam tempor rhoncus enim vitae porttitor.

                        <div><input id="agreement" type="checkbox">Accept</div>
                   </div>
            </fieldset>
        </form> 
</body>

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5620

Try using a float:left; for the label and a nested division for the right content that would be float:right;. You basically want a left and right division.

Take a look at this fiddle.

Upvotes: 1

Related Questions