CODEWITHSUNDEEP
html
ksv
ksv

Reputation: 3

formatting website design

the following code displays form upside and the google map downside.how should I edit the code to display form in the left side and google map in the right side of my webpage in the same line?

<form action="php/process.php" method="post" enctype="multipart/form-data">
    <p>
        Subject<br>
        <input type="text" name="subject" size="40">
    </p>
    <p>
        Email<br>
        <input type="text" name="email" size="40">
    <p>
        Comment<br>
        <textarea name="message" rows="5" cols="40"></textarea>
    </p>
    <p>
        <button type="submit">Send</button>
    </p>
</form>

</div>
<!--contact form ends-->

<!--google map starts-->
<h2 align="right">
&nbsp;&nbsp;&nbsp;&nbsp;
<iframe width="400" height="250" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;output=embed"></iframe>
<br /><small>
<h2>View <a href="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">KsV's HoMe</a> in a larger map</small></h2>
<!--gogle map ends-->

Upvotes: 0

Views: 90

Answers (1)

john Smith
john Smith

Reputation: 17906

you could do like this :

div id="box" is wrapping both, so to say your "line" div id="formleft" floats the form left and div id="mapright" floats the map right

<div id="box" style="position:relative;height:250px;width:820px;margin:0;padding:0;">
<div id="formleft" style="position:relative;float:left;width:400px;height:250px">
<form action="php/process.php" method="post" enctype="multipart/form-data">
<p>
  Subject<br>
<input type="text" name="subject" size="40">
</p>
<p>
Email<br>
<input type="text" name="email" size="40">
<p>
Comment<br>
<textarea name="message" rows="5" cols="40"></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>


 </form>

</div>
<!--contact form ends-->
<div id="mapright" style="position:relative;float:right;width:400px;height:250px">
<!--google map starts--><h2 align="right">
&nbsp;&nbsp;&nbsp;&nbsp;     <iframe width="400" height="250" frameborder="1"        scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;output=embed">    </iframe><br /><small><h2>View <a href="https://maps.google.com/maps/ms?msa=0&amp;msid=202307324044817298386.0004b64eed9ece46b338e&amp;ie=UTF8&amp;t=h&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">KsV's HoMe</a> in a larger map</small></h2>
<!--gogle map ends-->
</div>
</div>

Upvotes: 1

Related Questions