Float left prevents separation

**espresso** · Apr 8, 2009, 11:27

the 2nd * shows up next to the last div before it because I have all my Ids here floating left. This is a web form so I need the next span to show up on a new row but instead the *shows up inext to the first radiobutton list

<div id="Tform">
<span class="requiredText">*</span>
<div class="formLabel">Background Color</div>
<div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0, false)%><label for="</div>
<div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0)%></div>

<div class="fieldRowSeperator"></div>

<span class="requiredText">*</span>
<div class="formLabel">First Name</div>
<div class="formField"><%=Html.TextBox("FirstName", "", new {width="100px"}) %></div>
</div>

.formLabel
{
font-size: 14px;
padding: 10px 10px 0px 0px;
vertical-align:text-top;
float: left;
}

.formField
{
padding: 10px 10px 0px 0px;
float: left;
}

.fieldRowSeperator
{
height: 20px;
}

.requiredText
{
color: #7F1517;
padding: 10px 5px 0px 0px;
float: left;
}

essentially I'm trying to create a divless grid for my form fields to create rows for my form.

**Paul O'B** · Apr 8, 2009, 11:53

HI,

This is the CSS forum so please just post CSS and html and not ASP. Just post the resulting html that you get from view source and it will make our job a lot easier

I think I answered this question in your other posts with the examples I gave.

If you want the items in a row do something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
fieldset{width:300px;float:left}
legend{
    font-weight:bold;
    margin:0 0 1em 0;
    color:#000;
}
#form1 label{
    float:left;
    width:7em;
    text-align:right;
    padding:5px 10px 5px 10px;
}
#form1 input{
    width:100px;
    margin:5px 0;
    float:left;
}
br{clear:both;}
label abbr{
    color:red;
    font-weight:bold;
    border:none;
    padding:0 3px 0 0;
}

</style>
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset>
    <legend>Form Test</legend>
    <label for="firstname"><abbr title="Required field">*</abbr>First Name:</label>
    <input type="text" name="firstname" id="firstname" />
    <br />
    <label for="lastname"><abbr title="Required field">*</abbr>Last Name:</label>
    <input type="text" name="lastname" id="lastname" />
    <br />
    <label for="address1"><abbr title="Required field">*</abbr>Address 1:</label>
    <input type="text" name="address1" id="address1" />
    <br />
    <label for="address2">Address 2:</label>
    <input type="text" name="address2" id="address2" />
    <br />
    <label for="address3">Address  3:</label>
    <input type="text" name="address3" id="address3" />
    <br />
    <label for="address4">Address 4:</label>
    <input type="text" name="address4" id="address4" />
    <br />
    <label for="city">City:</label>
    <input type="text" name="City" id="city" />
    <br />
    <label for="state">State</label>
    <input type="text" name="state" id="state" />
    <br />
    <label class="zip" for="zip">Zip:</label>
    <input type="text" name="zip" id="zip" />
    <br />
    <label for="tel">Telephone:</label>
    <input type="text" name="tel" id="tel" />
    <br />
    </fieldset>
</form>
</body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: Float left prevents separation

Thread Tools

Display

Float left prevents separation

Bookmarks

Bookmarks

Posting Permissions