SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: Float left prevents separation
-
Apr 8, 2009, 11:27 #1
- Join Date
- Oct 2008
- Posts
- 551
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Float left prevents separation
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.
-
Apr 8, 2009, 11:53 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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>
Bookmarks