locked
td tag is not shown correctly side by side

    Question

  • hey guys,

    im really new in html / css / js programming for Windows 8.

    i have a problem regarding td tags in a table. they are not shown correctly on the same height.

    <body>
        <table>
            <tr>
                <td>
                    <h1>Notification Application</h1><br /><br />
                    <label for="date">Date</label><br />
                    <div data-win-control="WinJS.UI.DatePicker" id="date" accesskey="F"></div><br /><br />
                    <Label for="title">Title</Label><br />
                    <input id="title" type="text" /><br /><br />
                    <label for="comment" >Comment</label><br />
                    <textarea cols="30" rows="10" id="comment" accesskey="V"></textarea><br /><br />
                    <button id="createEventButton" class="createButton">Create Event</button><br /><br />
                    <span id="output"></span>
                <td>
                    <h1>Events</h1><br /><br />
                </td>
            </tr>

    I can't post images because they need to verify my account lol...

    I want the "Event" label on the same height as the "Notification Application" label and a little bit of space in the middle, but i don't get it.

    greetings,

    flouu

    Friday, November 23, 2012 11:31 AM

Answers

  • Try to use a -ms-grid instead of a table.

    <div id="content">

    <section> <header><h1>Notification Application</h1></header> <br /><br /> <label for="date">Date</label><br /> <div data-win-control="WinJS.UI.DatePicker" id="date" accesskey="F"></div><br /><br /> <Label for="title">Title</Label><br /> <input id="title" type="text" /><br /><br /> <label for="comment" >Comment</label><br /> <textarea cols="30" rows="10" id="comment" accesskey="V"></textarea><br /><br /> <button id="createEventButton" class="createButton">Create Event</button><br /><br /> <span id="output"></span> </section> <section id="right"> <header><h1>Events</h1></header> <br /><br /> </section>

    </div>


    #content {
    	display: -ms-grid;
    	-ms-grid-columns: 1fr 1fr;
    }
    
    #right {
    	-ms-grid-column: 2;
    }


    Friday, November 23, 2012 12:50 PM