#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    6
    Rep Power
    0

    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...?
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    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).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    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.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    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.

    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).

IMN logo majestic logo threadwatch logo seochat tools logo