Problem with positioning my contact form

HTML & CSS
1

Hi,

I am trying to position my Contact form under the Map but to the left of
the “Related Posts” box.

This is how it looks now:

And this is the live site: london-2-bedroom-flat

This is the code :


if ($map == "y") {
echo "<figure class=\\"right_fig\\">
			<div id=\\"map_canvas\\" style=\\"width:100%;height:400px;\\"></div>
			<div id=\\"getdirections\\">
				<ul class=\\"directions\\">
				<li class=\\"smallfield\\"><span class=\\"name\\">Start Location</span><input  type=\\"text\\" id=\\"EZMBFromLocation\\" name=\\"EZMBFromLocation\\"/></li>
				</ul>
				<ul class=\\"directions\\">
				<li class=\\"button\\"><input name=\\"GetDirections\\" id=\\"GetDirections\\" onclick=\\"getDirections()\\" type=\\"submit\\" value=\\"Get Directions\\" /></li>
				</ul>
				</div>
				<div  class=\\"directions\\" id=\\"map_directions_panel\\" ></div>
				
				</figure>";
		} // end if

		if ($cont == "y") {
		echo "
		<figure class=\\"right_fig\\" style=\\"width:300px;\\">
			<form style=\\"margin:10px auto; text-align:center;\\" name='regis' action=\\"http://combld.com/au_contact.php\\" method='POST'>
			<input type='hidden' name='t5a6lk' value='9y6es' >
			<input type='hidden' name='x_page_id' value=\\"$page_id\\" >
			<div class='art_title'>
				<label><b>Contact Form<br><br></b></label>
				<label>Subject:&nbsp;</label>
				<input class='data1' type='text' name='x_mes_head' size='25' value = '' >
				</div>
			<div class='art_title'>
				<label>Name:&nbsp;&nbsp;&nbsp;</label>
				<input class='data1' type='text' name='x_contact' size='25' value = '' >
				</div>
			<div class='art_title'>
				<label>Email:&nbsp;&nbsp;&nbsp;&nbsp;</label>
				<input class='data1' type='text' name='x_email' size='25' value = '' >
				</div>
			<div class='art_title'>
				<label><b><br>Your Message</b></label>
				<textarea id='sug_body' class='data1' rows='12' cols='30' name='x_mess'>$cont_mes</textarea>
				</div>
			<div class='art_title'>
				<label><b><br>Verification Image</b></label>
				<span><img style = \\"width:260px; height:150px; border:solid darkblue 1px;\\" src=\\"http://combld.com/sys_images/check1.jpg\\"></span>
				</div>
				<div class='art_title'>
				<label>How many heads ?:&nbsp;</label>
				<input class='data1' type='text' name='x_check' size='25' value = '' >
				</div>
			<div style='margin:20px auto;'>
				<input type='submit' value='SEND MESSAGE NOW'>
				</div>
		  </form>
		</figure>";
		} // end if

This is the CSS for the box:

figure.right_fig{
	display:block;
	float:right;
	width:420px;
	margin:10px;
	border: solid black 2px;
	}

Of course source code will show all CSS.

Actually, I noticed that if I leave the width as 420px then the box goes into the
position that I want, but really I would like the width to be 300px.

Problem is - forcing it to slide down under the Map - but still to the left of the
“Related Posts” box.

PS - please view page with Chrome - doesn’t work in IE yet :rolleyes:

Any help much appreciated :):slight_smile:

Thanks.

.

2

Add the property in blue:

<figure class=“right_fig” style=“width: 300px; clear: right;”>

FYI: your HTML contains 102 errors. It’s hard to take a page with so may errors seriously.
Highly recommended: http://validator.w3.org/

3

Hi,

Thanks for your reply.

How did you see those 102 errors ?

When I try the validator ( validator.w3.org ) I just get a parse error and 3 errors listed .

I really want to clean up the page,
but can not seem to see what you are seeing - how come ? :confused:

PS - YOU A ARE HERO !
I JUST MADE THAT Clear right change, and it did the job :D:D
Thanks.

.

4

If validated by URL, the validator does not recognize your file as an HTML5 doctype because this line
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
is too far from the beginning of the document.
(The meta description is too long. Either put the tag with the charset above the tag with the description, or reduce the length of the description considerably.

The page is also missing the opening <html> tag.

The code for this page is extremely poorly written. <br> tags throughout instead of <p> tags for new paragraphs. The <big> tag is obsolete. There are numerous opening tags without corresponding closing tags. The code needs a major overhaul, IMO. The validator will help, but understanding how to write good code would be the greatest help of all. If you use a PC, and if you use the Firefox browser, you can install the Firebug plugin. The descriptions of the errors given by Firebug are clearer than those given by the W3C validator. Other browsers have similar tools, but I am not familiar with them.

Good luck.

5

Ok

Thanks for pointing out the error.

I will address those issues and try again :slight_smile:

BTW
I did have the tag in before, but took it
out following this advice:

It’s just just supposed to be:

<!DOCTYPE html>

with the html being lower case, and you don’t need to put an <html> tag under it.

( From a rival forum !!! )

Thanks again. :slight_smile:

.

6

WOW !!!

Done it - validated :slight_smile: :slight_smile:

.

7

Very nicely done :slight_smile:

If you are so inclined, I’d recommend studying up on text styling… using <p>aragraph tags instead of <br>eak tags. There are several reasons why <p> tags make more sense than <br> tags including accessibility and ease of styling.

It’s a bit of “work” at first as you begin to consider margins and padding, but the payoff in the long run will be vastly improved control over your styles.

Best of luck to you.