How do I make these two files "float next" to each other?

Dev Shed Forums Sponsor:

November 29th, 2012, 09:14 PM

xod_s

Registered User

Join Date: Oct 2012

Posts: 6

Time spent in forums: 1 h 13 m 19 sec
Reputation Power: 0

Homework - How do I make these two files "float next" to each other?

I recently made a schedule and contact form for an assignment but what's new to me this time is how they got to be side by side.

I've been working on them separately but now I have to put them in the same file ( I guess) and make two containers with different respective names.Somehow I can't use left or right since the positions how these are presented are relative (seeing as how ppl's computer screens work differently and such).

I wont put up the CSS that one of the files links to but these are the two largely done files that have to be contained
////////////////////////////////////////////////////////////////////

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN>
<!"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
   <script src = "modernizr-1.5.js"></script>
   
 </head>
 <style>
 table {border: 2px #305704; }
 td{border:1 px solid #305704;padding 0 1% 1% 5%;} 
 
 </style>

 <p><center><strong><font size="5">Family Reunion Schedule</font></strong><center></p>
 
<body>
<div id="schedule">

<table border="1" cellpadding="15"> 

<tr>

<th>Day</th>
<th>Time</th>
<th>Activity</th>
</tr>

<tr>
<td rowspan="7">Saturday</td>
</tr>

<tr>
<td>8am-9am</td>

<td>Welcome breakfast</td>
</tr>

<tr>
<td>9am-11am</td>

<td>Games for kids</td>
</tr>

<tr>
<td>11am-1pm</td>

<td>Lunch</td>
</tr>

<tr>
<td>1pm-5pm</td>

<td>Craft Table and Video</td>
</tr>

<tr>
<td>5pm-7pm</td>

<td>Dinner</td>
</tr>

<tr>
<td>7pm-9pm</td>

<td>Video viewing</td>
</tr>


<tr>
<td rowspan="5">Sunday</td>
</tr>

<tr>
<td>8am-9am</td>

<td>Breakfast</td>

</tr>

<tr>
<td>9am-11am</td>

<td>Story telling</td>
</tr>

<tr>
<td>11am-1pm</td>


<td>Lunch</td>

</tr>

<tr>
<td>1pm-5pm</td>

<td>Craft Table and Family history research</td>

</tr>

<tr>
<td colspan="7"><center>Group Photos</center></td>
</tr>


</table>

</div>

<div id="contactform">
<form> </form>

<tr>
<td>

</td>
</tr>

</div>

</body>

</html>

//////////////////////////////////////////////

Code:

<!DOCTYPE html>

<html>
<head>

     
   <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
   <script src = "modernizr-1.5.js"></script>
    
 <link rel="stylesheet" type="text/css" href="family.css">
 </head>
<body>

<form name="contact" action="html_form_action.asp" method="get">
<!--  have 2 sepearte it things in2 div 2 get it in2 boxes-->
<fieldset>
<legend>Contact Information</legend>

First name: <input type="text" name="FirstName" value=""><br>
Last name: <input type="text" name="LastName" value="Sullivan"><br>
E-mail address: <input type="text" name="EmailAddress" placeholder="name@anywhere.com" value=""><br>
</fieldset>

<fieldset>
<legend>Personal Information</legend>

<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female" checked="checked">Female<br>

Year of Birth: <input type="text" name="YearOfBirth" maxlength="4" value=""><br>
</fieldset>

<fieldset>
<legend>I would be interested in:(check all that apply)</legend>

<input type="checkbox" name="interests" value="mailing" checked="checked">Please add me to the mailing<br>
<input type="checkbox" name="interests" value="ireland">I'd like to visit Ireland<br>
<input type="checkbox" name="interests" value="reunion">I'll help to organize a family reunion<br> 
<input type="checkbox" name="interests" value="documentation">I'll help put together the family tree documentation<br>
<input type="checkbox" name="interests" value="newsletter">I'll help put together a newsletter<br>
</fieldset>

<fieldset>
<legend>Send a message</legend>

<p>Subject</p>

<select name="subject">
<option value="providing">Providing information about Sullivans</option>
<option value="visiting">Visiting Ireland</option>
<option value="ancestry" selected="selected">Ancestry research question</option>
<option value="other">Other</option>
</select>


<p>Message</p>



<textarea rows="10" cols="45">

</textarea>
</fieldset>
</body>
</html>



<p> </p>

<!--If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".-->

                                                                                                            
<button type="Submit" value="Submit">SEND INFORMATION</button>

<button type="Reset" value="Reset">CANCEL</button>
</form>

</html>

is "containing" side by side on the same page as simple as a matter of putting in some new kind of tags or...?

November 30th, 2012, 12:35 PM

AndrewSW

JavaScript is not spelt java

Join Date: Feb 2011

Location: Landan, England

Posts: 743

Time spent in forums: 2 Weeks 1 Day 23 h 8 m 28 sec
Reputation Power: 164

One of the pages could include an iframe tag with the src set to the other file.

BTW It is contradictory that you are using modernizr in the first file when it has an HTML4 DOCTYPE and uses ancient/deprecated center and font tags.

And your second page has two closing html tags. You should validate your HTML (and CSS).

November 30th, 2012, 08:47 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 53 m 4 sec
Reputation Power: 7

You can validate your CSS here: http://jigsaw.w3.org/css-validator/

If you want to center something using CSS, give the html element and id and style it firstly declaring a width on the element, and then setting margin to auto

OR

Set a style on the parent element of the element you wish to center of text-align with a value of center

PLEASE NOTE - On some occasions you will have to do BOTH of these things to get an element to center.
_____
NM.

December 2nd, 2012, 07:16 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Quote:

Originally Posted by Nanomech

PLEASE NOTE - On some occasions you will have to do BOTH of these things to get an element to center.

That's only for when dealing with IE5.x or IE6+ in "backwards compatibility mode", aka "quirks mode".

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

Homework - How do I make these two files "float next" to each other?

Developer Shed Advertisers and Affiliates