Jump to content

Two quick column questions

jaidanwolf

By jaidanwolf
in CSS

Recommended Posts

jaidanwolf Newbie

jaidanwolf

Posted
Posted

Hi, just two quick questions about columns here...First, I've used the following code to create a scrollbox on each page:<div style="border:1px solid #330000; background-color:#faf8cc; color:#000000; padding-left: 5px; padding-top: 2px; width:495px; height: 571px; overflow:scroll;overflow-y:scroll;overflow-x:hidden;">And as far as I can tell, it's been working just fine. However, I've set the height of the scrollbox to match up with the blue background of the rightside column, as seen here: http://tinyurl.com/2db9786In Firefox, it lines up perfectly for me but in IE it does not. I'm having trouble figuring out why but the Verisign link and the form fields seem to be rendering differently in the two browsers. Is there any way to fix this and make it uniform so that the columns line up regardless of the browser being used?Second, on other pages of the site where the left column is structured differently, like so: http://tinyurl.com/25pjuat -- is there a way to extend the background color of the right column so that the blue goes down to the bottom, to line up with the left side? I tried creating a gif of the same color and changing the CSS to repeat it vertically but for some reason it didn't change anything.Any suggestions would be much appreciated. Please let me know if there's any particular code you need to see to answer these...thanks a bunch!

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

If you don't have a <!DOCTYPE> tag on your document, Internet Explorer and other browsers will display boxes of different sizes based on margin, padding and borders.There are several methods to make two columns have the same height. One of them is to put the larger column inside the smaller one. Another solution is to have them both inside the same container and give that container a repeating vertical image with the backgrounds of both columns.

Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted
If you don't have a <!DOCTYPE> tag on your document, Internet Explorer and other browsers will display boxes of different sizes based on margin, padding and borders.
Hi, thanks. There is a doctype on all of my pages: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">And I believe that I've made all of my margins, etc. uniform but perhaps I missed something?
There are several methods to make two columns have the same height. One of them is to put the larger column inside the smaller one. Another solution is to have them both inside the same container and give that container a repeating vertical image with the backgrounds of both columns.
This is my stylesheet:
body {	margin: 10px 0;	padding: 0;	background: #ffffff;	font: normal small Arial, Helvetica, sans-serif;	}.h1index {	margin-bottom: 0;	margin-top: 1px;	padding-top: 10px;	color: #0000a0;	font-family: Arial, Verdana;	font-size: 1.2em;	letter-spacing: -.05em;	}h1 {	margin-bottom: 0;	margin-top: 0;	padding-top: 10px;	color: #660000;	font-family: Arial, Verdana;	font-size: 1.6em;	letter-spacing: 0em;	}	h2 {  letter-spacing: -.05em;	font-size: 1.3em;	color: #0000a0;	padding-top: 0px;	margin-bottom: 0;	margin-top: 0;	}.h2scroll {  letter-spacing: .01em;	font-size: 1.2em;	font-weight: bold;	color: #0000a0;	margin-bottom: 0;	margin-top: 0;	}h3 {	margin-top: 0;	margin-bottom: 0;	color: #000000;	font-size: 1.1em;	font-weight: normal;	padding-bottom: 5px;	font-family: Arial, Verdana, "Times New Roman", Times, serif;}h4 {	margin-top: 0;	margin-bottom: 0;	color: #d20000;	background-color: #faf8cc;	font-size: 1.1em;	font-weight: bold;	padding-top: 2px;	padding-bottom: 5px;	font-family: Arial, Verdana, "Times New Roman", Times, serif;}h5 {	margin-top: 0;	margin-bottom: 0;	color: #000000;	font-size: 1.0em;	padding-bottom: 5px;	font-weight: normal;	font-family: Arial, Verdana, "Times New Roman", Times, serif;}p, ul, ol, blockquote {	margin-top: 0;	line-height: 18px;}.pphone {  font-size: 13px;	font-weight: normal;	color: #000000;	margin-bottom: 0;	margin-top: 0;	padding-bottom: 3px;	background-color: #faf8cc;	}.plang {  font-size: 13px;	font-weight: bold;	color: #000000;	margin-bottom: 0;	margin-top: 0;	padding-bottom: 3px;	}a:link {	color: #730000;	text-decoration: none;	border: none;}a:visited {  color: #730000;  text-decoration: none;  border: none;}a:hover {	text-decoration: underline;	}/* Header */#header {	width: 875px;	height: 150px;	margin: 0 auto;	background: url(images/main.jpg);  border: 1px solid #000000;  }/* Content */#content {	width: 875px;	margin: 0 auto;	border: 1px solid #330000;}#colOne {	float: left;	width: 500px;	padding: 6px;	background: #ffffff;	}#colTwo {	float: right;	width: 350px;	padding: 5px;	background: #e5eff7;}	img { border: none; } .post {}	div.RedRule {      border: 0px;      background-color: #0000a0;      padding-top: 0px;      height: 1px;      width: 70%;      }      div.RedRule hr {    /* for CSS1 browsers */      display: none;      }      div.RedRule * {     /* for CSS2 browsers */      display: none;}            img.floatRight {     float: right;     margin: 4px; }img.floatLeft {     float: left;     margin: 4px; }/* Footer */#footer {	width: 700px;	margin: 0 auto;	padding-top: 0px;	color: #000000;	font-size: 12px;}#footer a {	color: #a00000;	text-decoration: none;}#footer a:hover {	text-decoration: underline;	}

Could you please let me know how or what code is needed to place the larger column inside the smaller one? Or if you think the other approach is better, how to put them both into the same container? I just want to make sure the layout stays exactly the same and that I don't screw everything up by trying to change this :)Thanks again, really appreciate the help!

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

First of all I'd recommend switching to a Strict DTD. It'll provide much better cross-browser compatibility, assuming your code is also validated.Secondly to put anything inside anything is just a matter of moving your tags around in your code. If you want the large column inside the small column you would do something like this:

<div id='smallColumn'>   <div id='largeColumn'>	  ...large column content...   </div>   ...small column content...</div>

To put them in on larger container would be something like this:

<div id='container'>   <div id='col1'>	  ...col1 content...   </div>   <div>	  ...col2 content...   </div></div>

Link to comment
Share on other sites
  • 2 weeks later...
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted

Hmm...thanks but I'm not really comfortable with strict yet. I feel like I've only just gotten good enough to build my own site from scratch in transitional (not this site, but another I just did) so I don't want to mess with that right now and risk having things get disastrous! I would have to redo a lot of the coding if I changed that particular site to strict now so I think I'll leave that alone.I tried the approach you mentioned, putting the large column into the small one, but it became a total mess, with the left column overlapping the right and the form getting pushed down, etc. I must be doing something wrong but I can't figure out what. If you have any idea, this is what is happening: test pageI might just leave it as it is. It's not the end of the world if there's a few px difference between the bottom of each column. Annoying, but I can live with it if there's no easy solution. Thanks again!

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Hmm...thanks but I'm not really comfortable with strict yet. I feel like I've only just gotten good enough to build my own site from scratch in transitional (not this site, but another I just did) so I don't want to mess with that right now and risk having things get disastrous! I would have to redo a lot of the coding if I changed that particular site to strict now so I think I'll leave that alone.
Fair enough. I understand what a task it would be to completely rewrite an entire site. But just for future reference, if you start any new projects I'd recommend going Strict. It'll be a lot easier to debug problems later on. Besides there isn't really any more 'skill' involved with writing to Strict standards it's just more rules. In fact, I think it almost requires less skill because there are a lot fewer cross-browser issues that way! :)
I tried the approach you mentioned, putting the large column into the small one, but it became a total mess, with the left column overlapping the right and the form getting pushed down, etc. I must be doing something wrong but I can't figure out what. If you have any idea, this is what is happening:
Did you try putting both columns inside another container with a repeating background like Ingolme suggested?
Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted
there isn't really any more 'skill' involved with writing to Strict standards it's just more rules. In fact, I think it almost requires less skill because there are a lot fewer cross-browser issues that way!
Heh yeah, good point :) I will definitely attempt to work with Strict next time. The one I just designed is here - it's a new design for a site that I've had for a few years. I used Transitional because that's what I'm used to and also it's the first time I have NOT relied on a template and literally built it myself. So that was a big enough chore (and it's still just the main page that's done, it's going to take a while to get the whole site finished lol). But I think it's a huge improvement for me to do my own design, even if not in Strict!
Did you try putting both columns inside another container with a repeating background like Ingolme suggested?
I did but the problem remained the same...extend the scrollbox on the left side and the right side stays where it is, even though I specified for the background to repeat vertically. It seems like it would be such an easy task to get this tweaked but for some reason, I'm having real issues making it happen.
Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted
don't if this is the desired effect, but it brings columns in line, well in FF anyway.#colTwo {background:#E5EFF7 none repeat scroll 0 0;padding:5px;}
I'm using FF and I added that bit in but it's still having the same result...if the scrollbox in the left column is extended, it becomes uneven because the right side does not extend along with it. I'm probably just missing something simple here but it's not working. Sort of ready to give up and let it be :)
Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted
add line-height:0; to content, line-height:normal; to colOne and colTwo, and i think that is it
Thank you so much for your efforts dsonesuk, but it's still not working. I applied your suggested changes and uploaded it here - you see how the columns are very different in length there.I did not write this one on my own but rather just redid an existing layout. It was originally only meant to be a temporary startup design for a relative's new company but it ended up taking off and everyone liked it so they kept it. As a result though, there might be some odd stuff going on in the coding that I'm not aware of, so I might very well be overlooking some basic issue that's causing this column alignment not to happen.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

the layout is different from the one originally worked?should have this between body tags

<div id="header"><a href="testimonials.html"><img src="images/testimonials.png" alt="testimonials"></a></div><div id="content"><div id="colTwo"><div id="colOne"><center>  <table border="0" cellpadding="0" width="75%"><tbody><tr><td valign="top" width="25%"><center><a href="http://www.skycityapts.com" style="text-decoration: none;"><img src="images/flag-eng.png" style="border-style: none;" alt="eng"></a><br><b>English</b></center></td><td valign="top" width="25%"><center><a href="http://www.skycityapts.com/spanish/index.html" style="text-decoration: none;"><img src="images/flag-spa.png" style="border-style: none;" alt="spa"></a><br><b>Español</b></center></td><td valign="top" width="25%"><center><a href="http://www.skycityapts.com/french/index.html" style="text-decoration: none;"><img src="images/flag-fre.png" style="border-style: none;" alt="french"></a><br><b>Français</b></center></td><td valign="top" width="25%"><center><a href="http://www.skycityapts.com/portuguese/index.html" style="text-decoration: none;"><img src="images/flag-por.png" style="border-style: none;" alt="portuguese"></a><br><b>Português</b></center></td></tr></tbody></table><hr>		  <a href="index.html" onmouseover="document.images['sa'].src='images/menuhover1.jpg';" onmouseout="document.images['sa'].src='images/menu1.jpg';"><img src="images/menu1.jpg" name="sa" style="border-style: none;" alt="menu"></a>		  <a href="locations.html" onmouseover="document.images['sc'].src='images/menuhover2.jpg';" onmouseout="document.images['sc'].src='images/menu2.jpg';"><img src="images/menu2.jpg" name="sc" style="border-style: none;" alt="menu"></a>		  <a href="faq.html" onmouseover="document.images['se'].src='images/menuhover3.jpg';" onmouseout="document.images['se'].src='images/menu3.jpg';"><img src="images/menu3.jpg" name="se" style="border-style: none;" alt="menu"></a>		  <a href="terms.html" onmouseover="document.images['sg'].src='images/menuhover4.jpg';" onmouseout="document.images['sg'].src='images/menu4.jpg';"><img src="images/menu4.jpg" name="sg" style="border-style: none;" alt="menu"></a>		  </center>  <div class="post">    <br>  <div style="border: 1px solid rgb(51, 0, 0); background-color: rgb(250, 248, 204); color: rgb(0, 0, 0); padding-left: 5px; padding-top: 2px; width: 495px; height: 697px; overflow-y: scroll; overflow-x: hidden;">	<center><h1 class="h1index">Short-Term Furnished Apartment Rentals in New York<br>For Vacation or Business</h1></center><table border="0" cellpadding="10" width="100%"><tbody><tr><td valign="top" width="50%"><center><a href="apt-chelsea1bed.html" style="text-decoration: none;"><img src="images/apt-chelsea.jpg" style="border-style: none;" alt="chelsea" width="200"></a><br><b>Chelsea Court</b><br><i>1-bedroom apartments</i><br><b>Location:</b> <a href="chelsea.html">Chelsea</a><br></center></td><td valign="top" width="50%"><center><a href="apt-executive1bed.html" style="text-decoration: none;"><img src="images/apt-executive.jpg" style="border-style: none;" alt="executive" width="200"></a><br><b>Executive Plaza</b><br><i>1-bedroom apartments</i><br><b>Location:</b> <a href="theatredistrict.html">Theatre District</a><br></center></td></tr><tr><td valign="top" width="50%"><center><a href="apt-hudsonstudio.html" style="text-decoration: none;"><img src="images/apt-hudson.jpg" style="border-style: none;" alt="hudson" width="200"></a><br><b>Hudson Crossing</b><br><i>Studio, 1- and 2-bedrooms</i><br><b>Location:</b> <a href="midtownwest.html">Midtown West</a><br></center></td><td valign="top" width="50%"><center><a href="apt-longacre2bed.html" style="text-decoration: none;"><img src="images/apt-longacre.jpg" style="border-style: none;" alt="longacre" width="200"></a><br><b>Longacre House</b><br><i>2-bedroom apartments</i><br><b>Location:</b> <a href="theatredistrict.html">Theatre District</a><br></center></td></tr><tr><td valign="top" width="50%"><center><a href="apt-riverbank3bed.html" style="text-decoration: none;"><img src="images/apt-riverbank.jpg" style="border-style: none;" alt="riverbank" width="200"></a><br><b>Riverbank West</b><br><i>Studios and 3-bedroom apartments</i><br><b>Location:</b> <a href="timessquare.html">Times Square</a><br></center></td><td valign="top" width="50%"><center><a href="apt-71bwaystudio.html" style="text-decoration: none;"><img src="images/apt-71broadway.jpg" style="border-style: none;" alt="71broadway" width="200"></a><br><b>71 Broadway</b><br><i>Studio and 1-bedroom apartments</i><br><b>Location:</b> <a href="financialdistrict.html">Financial District</a><br></center></td></tr><tr><td valign="top" width="50%"><center><a href="apt-washingtonstudio.html" style="text-decoration: none;"><img src="images/apt-washington.jpg" style="border-style: none;" alt="washington" width="200"></a><br><b>600 Washington</b><br><i>Studio apartments</i><br><b>Location:</b> <a href="village.html">Greenwich Village</a><br></center></td><td valign="top" width="50%"><center><a href="apt-wwpstudio.html" style="text-decoration: none;"><img src="images/apt-wwp.jpg" style="border-style: none;" alt="wwp" width="200"></a><br><b>Worldwide Plaza</b><br><i>Studio apartments</i><br><b>Location:</b> <a href="theatredistrict.html">Theatre District</a><br></center></td></tr></tbody></table>		</div>		  </div>	  </div>		  <center>  <h4>Local Phone Numbers</h4><p class="pphone"><b>USA</b> 1 646 378 7925<br><b>Australia</b> 02 8011 4831<br><b>United Kingdom</b> 020 8816 7589</p><hr><h2>Inquiry Form</h2>  <p>Contact us for pricing and availability, or with any other questions at any time. We are here to help you 24/7!</p></center>  <form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="post" onsubmit="return checkform(this);"><input name="oid" value="00DA0000000KFbZ" type="hidden">  <input name="sfga" value="00DA0000000KFbZ" type="hidden"><input name="retURL" value="http://www.skycityapts.com/thanks.html" type="hidden"><table border="0" cellpadding="2" cellspacing="0">  <tbody><tr>	<td><label for="salutation">Salutation</label></td>	<td><select id="salutation" name="salutation"><option value="">--Select--</option><option value="Mr.">Mr.</option><option value="Mrs.">Mrs.</option><option value="Ms.">Ms.</option></select></td>  </tr>    <tr>	<td><label for="first_name">First Name</label></td>	<td><input id="first_name" maxlength="40" name="first_name" size="30" type="text"></td>  </tr>    <tr>	<td><label for="last_name">Last Name</label></td>	<td><input id="last_name" maxlength="80" name="last_name" size="30" type="text"></td>  </tr>  <tr>	<td><label for="phone">Phone</label></td>	<td><input id="phone" maxlength="40" name="phone" size="30" type="text"></td>  </tr>    <tr>	<td><label for="email">Email</label></td>	<td><input id="email" maxlength="80" name="email" size="30" type="text"></td>  </tr>  <tr>	<td><label for="country">Country of Residence</label></td>	<td><input id="country" maxlength="40" name="country" size="30" type="text"></td>  </tr>  <tr>	<td>Arriving:</td>	<td><input size="30" id="indate" name="indate" readonly="readonly" type="text">	<input name="00NA000000268NL" id="00NA000000268NL" value="" type="hidden">	</td>  </tr>  <tr>	<td>Departing:</td>	<td><input size="30" id="outdate" name="outdate" readonly="readonly" type="text">	<input name="00NA000000268NQ" id="00NA000000268NQ" value="" type="hidden"></td>  </tr>  <tr>	<td>Bedrooms:</td>	<td>	  <div align="left">		<select id="00NA000000269Gz" name="00NA000000269Gz" title="Bedrooms">		  <option value="">--Select--</option>		  <option value="0 (Studio)">0 (Studio)</option>		  <option value="1 Bedroom">1 Bedroom</option>		  <option value="2 Bedrooms">2 Bedrooms</option>		  <option value="3 Bedrooms">3 Bedrooms</option>		</select>		</div></td></tr>  <tr>	<td>Adults:</td>	<td>	  <div align="left">		<select id="00NA000000269H4" name="00NA000000269H4" title="No. of Adults">		  <option value="">--Select--</option>		  <option value="1">1</option>		  <option value="2">2</option>		  <option value="3">3</option>		  <option value="4">4</option>		  <option value="5">5</option>		  <option value="6">6</option>		  <option value="7">7</option>		  <option value="8">8</option>		</select>		</div></td></tr>  <tr>	<td>Children:</td>	<td>	  <div align="left">		<select id="00NA000000269H9" name="00NA000000269H9" title="No. of Children">		  <option value="">--Select--</option>		  <option value="0">0</option>		  <option value="1">1</option>		  <option value="2">2</option>		  <option value="3">3</option>		  <option value="4">4</option>		  <option value="5">5</option>		  <option value="6">6</option>		  <option value="7">7</option>		</select>		</div></td></tr>  <tr>	<td>Comments:</td>	  <td>  <div align="left">		<textarea name="00NA00000026tOQ" cols="30" rows="4" wrap="soft" id="00NA00000026tOQ" type="text"></textarea>	</div></td>  </tr>    <tr>	  <td colspan="2"> <div align="right">		<input name="submit" type="submit"> 	  </div></td>  </tr>    </tbody></table></form><br><center><script type="text/javascript" src="https://trustseal.verisign.com/getseal?host_name=www.skycityapts.com&size=S&use_flash=NO&use_transparent=NO&lang=en"></script><br><a href="http://www.verisign.com/verisign-trust-seal" target="_blank" style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); text-decoration: none; font-family: verdana,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 7px; line-height: normal; font-size-adjust: none; font-stretch: normal; letter-spacing: 0.5px; text-align: center;">ABOUT TRUST ONLINE</a></center><br>  </div>  <div style="clear: both;"> </div></div><center><div id="footer"><br><img src="images/cc-amex.jpg">  <img src="images/cc-mc.jpg">  <img src="images/cc-discover.jpg">  <img src="images/cc-visa.jpg"><br><a href="contact.html">Contact Us</a>  |  <a href="about.html">About Us</a>  |  <a href="privacy.html">Privacy Policy</a><br>© Sky City Apartments, LLC</div></center><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-13001715-1");pageTracker._trackPageview();} catch(err) {}</script><!-- Begin Salesforce Tracking Code, Place immediately before closing </BODY> tag --><script type="text/javascript" src="https://lct.salesforce.com/sfga.js"></script><script type="text/javascript">__sfga();</script><!-- End Salesforce Tracking Code, Place immediately before closing </BODY> tag -->

css should be

#colTwo {background:#E5EFF7 none repeat scroll 0 0;line-height:normal;overflow:hidden;padding:5px;}#colOne {background:#FFFFFF none repeat scroll 0 0;float:left;line-height:normal;padding:6px;width:500px;}#content {border:1px solid #330000;line-height:0;margin:0 auto;width:875px;}

Link to comment
Share on other sites
jaidanwolf Newbie

jaidanwolf

Posted
  • Author
Posted

Aah okay, I see what you mean now. Thanks so much for putting in the time!The only problem is, I can't have the rest of the page change. Using that code causes the blue coloring to wrap around the entire content area like a thin border. It also cuts off the left side of the blue "border" around the yellow Phone Numbers box on the right (sorry, I know that's a mouthful). Do you know if there is a way around those two issues?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

ok! try this

<div id="header"><a href="testimonials.html"><img src="images/testimonials.png" alt="testimonials"></a></div><div id="content"><div id="colOne"><center>  <table border="0" cellpadding="0" width="75%"><tbody><tr><td valign="top" width="25%"><center><a style="text-decoration: none;" href="http://www.skycityapts.com"><img alt="eng" style="border-style: none;" src="images/flag-eng.png"></a><br><b>English</b></center></td><td valign="top" width="25%"><center><a style="text-decoration: none;" href="http://www.skycityapts.com/spanish/index.html"><img alt="spa" style="border-style: none;" src="images/flag-spa.png"></a><br><b>Español</b></center></td><td valign="top" width="25%"><center><a style="text-decoration: none;" href="http://www.skycityapts.com/french/index.html"><img alt="french" style="border-style: none;" src="images/flag-fre.png"></a><br><b>Français</b></center></td><td valign="top" width="25%"><center><a style="text-decoration: none;" href="http://www.skycityapts.com/portuguese/index.html"><img alt="portuguese" style="border-style: none;" src="images/flag-por.png"></a><br><b>Português</b></center></td></tr></tbody></table><hr>		  <a onmouseout="document.images['sa'].src='images/menu1.jpg';" onmouseover="document.images['sa'].src='images/menuhover1.jpg';" href="index.html"><img alt="menu" style="border-style: none;" name="sa" src="images/menu1.jpg"></a>		  <a onmouseout="document.images['sc'].src='images/menu2.jpg';" onmouseover="document.images['sc'].src='images/menuhover2.jpg';" href="locations.html"><img alt="menu" style="border-style: none;" name="sc" src="images/menu2.jpg"></a>		  <a onmouseout="document.images['se'].src='images/menu3.jpg';" onmouseover="document.images['se'].src='images/menuhover3.jpg';" href="faq.html"><img alt="menu" style="border-style: none;" name="se" src="images/menu3.jpg"></a>		  <a onmouseout="document.images['sg'].src='images/menu4.jpg';" onmouseover="document.images['sg'].src='images/menuhover4.jpg';" href="terms.html"><img alt="menu" style="border-style: none;" name="sg" src="images/menu4.jpg"></a>		  </center>  <div class="post">    <br>  <div style="border: 1px solid rgb(51, 0, 0); background-color: rgb(250, 248, 204); color: rgb(0, 0, 0); padding-left: 5px; padding-top: 2px; width: 495px; height: 697px; overflow-y: scroll; overflow-x: hidden;">	<center><h1 class="h1index">Short-Term Furnished Apartment Rentals in New York<br>For Vacation or Business</h1></center><table border="0" cellpadding="10" width="100%"><tbody><tr><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-chelsea1bed.html"><img alt="chelsea" style="border-style: none;" src="images/apt-chelsea.jpg" width="200"></a><br><b>Chelsea Court</b><br><i>1-bedroom apartments</i><br><b>Location:</b> <a href="chelsea.html">Chelsea</a><br></center></td><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-executive1bed.html"><img alt="executive" style="border-style: none;" src="images/apt-executive.jpg" width="200"></a><br><b>Executive Plaza</b><br><i>1-bedroom apartments</i><br><b>Location:</b> <a href="theatredistrict.html">Theatre District</a><br></center></td></tr><tr><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-hudsonstudio.html"><img alt="hudson" style="border-style: none;" src="images/apt-hudson.jpg" width="200"></a><br><b>Hudson Crossing</b><br><i>Studio, 1- and 2-bedrooms</i><br><b>Location:</b> <a href="midtownwest.html">Midtown West</a><br></center></td><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-longacre2bed.html"><img alt="longacre" style="border-style: none;" src="images/apt-longacre.jpg" width="200"></a><br><b>Longacre House</b><br><i>2-bedroom apartments</i><br><b>Location:</b> <a href="theatredistrict.html">Theatre District</a><br></center></td></tr><tr><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-riverbank3bed.html"><img alt="riverbank" style="border-style: none;" src="images/apt-riverbank.jpg" width="200"></a><br><b>Riverbank West</b><br><i>Studios and 3-bedroom apartments</i><br><b>Location:</b> <a href="timessquare.html">Times Square</a><br></center></td><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-71bwaystudio.html"><img alt="71broadway" style="border-style: none;" src="images/apt-71broadway.jpg" width="200"></a><br><b>71 Broadway</b><br><i>Studio and 1-bedroom apartments</i><br><b>Location:</b> <a href="financialdistrict.html">Financial District</a><br></center></td></tr><tr><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-washingtonstudio.html"><img alt="washington" style="border-style: none;" src="images/apt-washington.jpg" width="200"></a><br><b>600 Washington</b><br><i>Studio apartments</i><br><b>Location:</b> <a href="village.html">Greenwich Village</a><br></center></td><td valign="top" width="50%"><center><a style="text-decoration: none;" href="apt-wwpstudio.html"><img alt="wwp" style="border-style: none;" src="images/apt-wwp.jpg" width="200"></a><br><b>Worldwide Plaza</b><br><i>Studio apartments</i><br><b>Location:</b> <a href="theatredistrict.html">Theatre District</a><br></center></td></tr></tbody></table>		</div>		  </div>	  </div>		  <div id="colTwo"><center>  <h4>Local Phone Numbers</h4><p class="pphone"><b>USA</b> 1 646 378 7925<br><b>Australia</b> 02 8011 4831<br><b>United Kingdom</b> 020 8816 7589</p><hr><h2>Inquiry Form</h2>  <p>Contact us for pricing and availability, or with any other questions at any time. We are here to help you 24/7!</p></center>  <form onsubmit="return checkform(this);" method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"><input value="00DA0000000KFbZ" name="oid" type="hidden">  <input value="00DA0000000KFbZ" name="sfga" type="hidden"><input value="http://www.skycityapts.com/thanks.html" name="retURL" type="hidden"><table border="0" cellpadding="2" cellspacing="0">  <tbody><tr>	<td><label for="salutation">Salutation</label></td>	<td><select name="salutation" id="salutation"><option value="">--Select--</option><option value="Mr.">Mr.</option><option value="Mrs.">Mrs.</option><option value="Ms.">Ms.</option></select></td>  </tr>    <tr>	<td><label for="first_name">First Name</label></td>	<td><input size="30" name="first_name" maxlength="40" id="first_name" type="text"></td>  </tr>    <tr>	<td><label for="last_name">Last Name</label></td>	<td><input size="30" name="last_name" maxlength="80" id="last_name" type="text"></td>  </tr>  <tr>	<td><label for="phone">Phone</label></td>	<td><input size="30" name="phone" maxlength="40" id="phone" type="text"></td>  </tr>    <tr>	<td><label for="email">Email</label></td>	<td><input size="30" name="email" maxlength="80" id="email" type="text"></td>  </tr>  <tr>	<td><label for="country">Country of Residence</label></td>	<td><input size="30" name="country" maxlength="40" id="country" type="text"></td>  </tr>  <tr>	<td>Arriving:</td>	<td><input readonly="readonly" name="indate" id="indate" size="30" type="text">	<input value="" id="00NA000000268NL" name="00NA000000268NL" type="hidden">	</td>  </tr>  <tr>	<td>Departing:</td>	<td><input readonly="readonly" name="outdate" id="outdate" size="30" type="text">	<input value="" id="00NA000000268NQ" name="00NA000000268NQ" type="hidden"></td>  </tr>  <tr>	<td>Bedrooms:</td>	<td>	  <div align="left">		<select title="Bedrooms" name="00NA000000269Gz" id="00NA000000269Gz">		  <option value="">--Select--</option>		  <option value="0 (Studio)">0 (Studio)</option>		  <option value="1 Bedroom">1 Bedroom</option>		  <option value="2 Bedrooms">2 Bedrooms</option>		  <option value="3 Bedrooms">3 Bedrooms</option>		</select>		</div></td></tr>  <tr>	<td>Adults:</td>	<td>	  <div align="left">		<select title="No. of Adults" name="00NA000000269H4" id="00NA000000269H4">		  <option value="">--Select--</option>		  <option value="1">1</option>		  <option value="2">2</option>		  <option value="3">3</option>		  <option value="4">4</option>		  <option value="5">5</option>		  <option value="6">6</option>		  <option value="7">7</option>		  <option value="8">8</option>		</select>		</div></td></tr>  <tr>	<td>Children:</td>	<td>	  <div align="left">		<select title="No. of Children" name="00NA000000269H9" id="00NA000000269H9">		  <option value="">--Select--</option>		  <option value="0">0</option>		  <option value="1">1</option>		  <option value="2">2</option>		  <option value="3">3</option>		  <option value="4">4</option>		  <option value="5">5</option>		  <option value="6">6</option>		  <option value="7">7</option>		</select>		</div></td></tr>  <tr>	<td>Comments:</td>	  <td>  <div align="left">		<textarea name="00NA00000026tOQ" cols="30" rows="4" wrap="soft" id="00NA00000026tOQ" type="text"></textarea>	</div></td>  </tr>    <tr>	  <td colspan="2"> <div align="right">		<input name="submit" type="submit"> 	  </div></td>  </tr>    </tbody></table></form><br><center><script type="text/javascript" src="https://trustseal.verisign.com/getseal?host_name=www.skycityapts.com&size=S&use_flash=NO&use_transparent=NO&lang=en"></script><br><a href="http://www.verisign.com/verisign-trust-seal" target="_blank" style="margin: 0px; padding: 0px; color: rgb(0, 0, 0); text-decoration: none; font-family: verdana,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 7px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; letter-spacing: 0.5px; text-align: center;">ABOUT TRUST ONLINE</a></center><br>  </div>  <div style="clear: both;"> </div></div><center><div id="footer"><br><img src="images/cc-amex.jpg">  <img src="images/cc-mc.jpg">  <img src="images/cc-discover.jpg">  <img src="images/cc-visa.jpg"><br><a href="contact.html">Contact Us</a>  |  <a href="about.html">About Us</a>  |  <a href="privacy.html">Privacy Policy</a><br>© Sky City Apartments, LLC</div></center><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-13001715-1");pageTracker._trackPageview();} catch(err) {}</script><!-- Begin Salesforce Tracking Code, Place immediately before closing </BODY> tag --><script type="text/javascript" src="https://lct.salesforce.com/sfga.js"></script><script type="text/javascript">__sfga();</script><!-- End Salesforce Tracking Code, Place immediately before closing </BODY> tag -->

css:

#content {background-color:#E5EFF7;border:1px solid #330000;line-height:0;margin:0 auto;overflow:hidden;width:875px;}#colOne {background:#FFFFFF none repeat scroll 0 0;float:left;line-height:normal;padding:6px;width:500px;}#colTwo {background:#E5EFF7 none repeat scroll 0 0;line-height:normal;overflow:hidden;padding:5px;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...