lining up fieldsets 1

[1DMF]

Hi,

I'm have major trouble understanding how to line up my form.

here is the html...

<div id="main">
			<div id="content">
				<div class="post" id="first">
                    <h2><img class="icon" src="images/icon-advice.gif" alt="" /> Advice Request Form</h2>
					<p>To have one of our fully qualified, professional advisers contact you to discuss your requirements, simply submit the form below.</p>
                </div>
					<form id="advice" action="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/cgi-bin/leadform.cgi"[/URL] method="post">
                        <fieldset>
                        	<input type="hidden" name="rtn_url" id="rtn_url" value="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/leads/thanks.html"[/URL] />
                            <legend>Personal Details&nbsp;</legend>
                                <ol>
                                    <li>
                                        <label for="fullname">Name<em>*</em></label>
                                        <input type="text" name="fullname" id="fullname" />
                                    </li>
                                    <li>
                                        <label for="address1">Address<em>*</em></label>
                                        <input type="text" name="address1" id="address1" />
                                    </li>
                                    <li>
                                        <label for="address2">Address 2</label>
                                        <input type="text" name="address2" id="address2" />
                                    </li>
                                    <li>
                                        <label for="town">Town/City<em>*</em></label>
                                        <input type="text" name="town" id="town" />
                                    </li>
                                    <li>
                                        <label for="county">County</label>
                                        <input type="text" name="county" id="county" />
                                    </li>
                                    <li>
                                        <label for="postcode">Postcode<em>*</em></label>
                                        <input type="text" name="postcode" id="postcode" />
                                    </li>
                                </ol>
                        </fieldset>
                        <fieldset>
                            <legend>Contact Details&nbsp;</legend>
                                <ol>
                                    <li>
                                        <label for="email">Email<em>*</em></label>
                                        <input type="text" name="email" id="email" />
                                    </li>
                                    <li>
                                        <label for="phone">Phone<em>*</em></label>
                                        <input type="text" name="phone" id="phone" />
                                    </li>
                                    <li>
                                        <label for="mobile">Mobile</label>
                                        <input type="text" name="mobile" id="mobile" />
                                    </li>
                                    <li>
                                        <label for="best">Best Time<em>*</em></label>
                                        <select name="best" id="best">
                                            <option value="">Please Select</option>
                                            <option value="Morning">Morning</option>
                                            <option value="Afternoon">Afternoon</option>
                                            <option value="Evening">Evening</option>
                                            <option value="Weekend">Weekend</option>
                                        </select>  
                                        <label for="method">Preferred Method<em>*</em></label>
                                        <select name="method" id="method">
                                            <option value="">Please Select</option>
                                            <option value="Email">Email</option>
                                            <option value="Phone">Phone</option>
                                        </select>
                                    </li>                                   
                                </ol>
                        </fieldset>
                        <fieldset>
                            <legend>Financial Information&nbsp;</legend>
                                <ol>
                                    <li>
                                        <label for="amount" size="5">Amount Required<em>*</em></label>
                                        £<input type="text" name="amount" id="amount" />
                                    </li>
                                    <li>
                                        <label for="reason">Reason<em>*</em></label>
                                        <select name="Reason" id="Reason">
                                            <option value="">Please Select</option>
                                            <option value="Remortgage">Remortgage</option>
                                            <option value="First Time Buyer">First Time Buyer</option>
                                            <option value="Buy To Let">Buy To Let</option>
                                            <option value="Equity Release">Equity Release</option>
                                        </select>
                                    </li>                                                                       
                                </ol>
                        </fieldset>
                        <div id="formbut">
                            <ul>
					            <li><a href="#" onclick="checkform(document.getElementById('advice'));" title="Submit Form">Submit</a><a href="#" onclick="document.getElementById('advice').reset();" title="Clear Form">Clear</a></li>
				            </ul>
			            </div>
                        All fields with <em>*</em> are required.
                    </form>                       			
			</div>

here is the css

fieldset {
float:left;
width: 220px;
margin: 0px 0px 0px 15px;
clear:bottom;
}

fieldset legend, fieldset em {
color: #3DB6FF;
}

fieldset label {
display: inline-block;
width: 80px;
margin: 0px 0px 0px 5px;
}

input {
width:120px;
}
select {
width:123px;
}

#amount {
width:106px;
}


#formbut a {
font-size: 13px;
text-decoration: none;
float: left;
font-weight: normal;
letter-spacing: 0;
color: #2B2B2B;
background: #E6E6E6;
display: block;
width: 100px;
text-align: center;
padding: 5px 0;
margin: 10px 10px 10px 15px;
}

#formbut a:hover {
background: #787878;
color: #E6E6E6;
}

#formbut li {
list-style-type: none;
}

I end up with

http://www.homeloanpartnership.co.uk/formbad.gif

how do I make the financial info box move down to the left so the buttons are on the right?

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

i added an id="contactfs" to the fieldset in question

<fieldset id="contactfs">
<legend>Contact Details&nbsp;</legend>

and then this CSS

#contactfs {
margin: 0px 0px 15px 15px;
}

is this correct to do things like this to make them line up?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Your third fieldset is there because it can fit there. Float will always look for the highest most point where the element can fit and put it there. If your third fieldset would be wider, it would have to go below the first, but as it just fits, it snugs under the second one, because second one is shorter. How to fix it? Most appropriate would be to add [tt]clear: left;[/tt] to the third fieldset, effectively clearing the floats before and beginning anew. I don't know however how well is that supported with the elements that are still floated. Another option is to add a dummy element that clears the gap. Or make both first and second fieldsets equally high. Or the margin solution you used. The bad thing about using methods that do not clear is the scalability. If someone makes fonts a lot larger on your page, the first fieldset will get longer again and your third will slide underneath second one again. That's why I guess looking for a clearing solution is best.

 

[1DMF]

I see the key point here as

Float will always look for the highest most point where the element can fit

so because there are a few pixels to the right higher than starting on the next line to the left it puts it on the right. OK got it. So does the clear:left mean, place the object on the left regardless? I placed it on the second fieldset and it was placed below the first on the left, even though there is space on the right for it, so it says, put fieldset in the next clearest left most position, right ?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

No, it acutally means there should be an invisible line separating the last left floated element and the one that has clear specified.

As you probably know, floats can be applied to left or right. If element is floated other elements (even the ones that are not floated) will wrap around it providing there is still space. If there is an element you do not want to wrap around a floated element, then you give it the clear attribute. This will result in the cleared element not wrapping around the floated element but rather look for the first available spot below the floated element and position itself there.

When you float more elements, cleared element will always appear underneath the longest floated element. Clear has four values: none is default and will cause element to wrap around floated elements, left will cause the element to position itself below the tallest left floated element, right is identical but with right and both will cause it to position itself below the tallest floated element -- be it left or right floated. This does not have anything to do with where the floated element is (on the right or left) but what float (left or right) it has specified.

In your case, your uncleared fieldset positions itself on the right because there's space there. If you add clear: left; to it, it positions itself to the left because you're floating it to the left. It positions itself below the left (first) fieldset because it clears all the floats and starts anew. I hope it makes sense.

 

[1DMF]

I think the invisible new line made sense before you baffled me with the rest - lol

ok so i changed my fieldsets to float:right instead and they started on the right going left, I kept the clear:left on the 3rd fieldset and it floated over the top of the left side fieldset why? if I remove the 'clear' tag it goes undeneath the right hand side element.

So basically is behaving mirror image to having it float left. Is it because I had clear:left and the fieldsets were float:right there are no 'left' elements so it goes over the top of the 2nd right floated element. does that mean the 'clear' attribute takes presidence over the float attribute?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.