Question

I am really bad at html and all this kind of stuff, so I need specifics. So my question is: how do I put my 3-column table into my already existing div without changing too much?

The code I have so far is as follows for the div I am trying to place the table in:

<div style="border:2px solid white;width:700px;height:350px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;display:table;"><u><b><font color=#EC008B><font size=5>MEASUREMENTS IN INCHES</u></b></font color=#EC008B></font size=5><br>

<table border="0" cellpadding="5" cellspacing="0" width="600">

<tr><td align="left" valign="top" width="200">

MEASUREMENTS

</td><td align="left" valign="top" width="200">

MEASUREMENTS

</td><td align="left" valign="top" width="200">

IMAGE WILL GO HERE

</td></tr></table>

</div>

But anyway, the 3-column table is appearing UNDER the div instead of IN it, and I don't know how to fix it. I have an image available of what it's doing, but I can't post it, so if you'd like to see it, let me know.

Also this is for Ebay. It does change some things, but I don't think it will affect this specific div, but I figured I'd let you know.

UPDATE:

Go to practiceboard.com and put in this code, this is what I have so far:

<table> <tr><td style="padding: 0px"><table bgcolor="#DAEBC6" border="0" width="800"     align="center" cellspacing="0"><tr><td width="800" background="http://i1373.photobucket.com/albums/ag383/Dixie_Stockwell/cleanbg1000x1000-01_zpsf98a4ebc.png" style="background-repeat: yes- repeat; padding: 0px"><center><img style="height:auto; width:auto; max-width:600px; max-height:600px;" src="http://i1373.photobucket.com/albums/ag383/Dixie_Stockwell/smallernetsukegirllogo-01_zpsc05c6cff.png"></center><img border="0" src="" width="1" height="10"><div align="center"><table border="0" cellspacing="0" bgcolor="#90C382" align="center"> <div style="border:2px solid white;width:700px;height:175px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;"><u><b><font color=#EC008B><font size=5>THINGS TO KNOW</u></b></font color=#EC008B></font size=5> <br><span style="height:100%;" align="left"><font size=3><font color=white><ul><li>Label sizes may vary from designer to designer and from decade to decade. Please use measurements for accurate sizing.</li><li>Garments are pre-owned and have been laundered, which may have caused shrinkage from original size.</li><li>Measurements are taken in inches and may be within a half inch of listed measurements.</li><li>All flaws will be identified and listed in the description.</li></ul></span></div><div style="border:2px solid white;width:700px;height:175px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;"><u><b><font color=#EC008B><font size=5>ABOUT</u></b></font color=#EC008B></font size=5><br><p style="height:100%;" align="center">POST ABOUT ITEM HERE </p></div>
<div style="border:2px solid white;width:700px;height:350px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;"><u><b><font color=#EC008B><font size=5>MEASUREMENTS IN INCHES</u></b></font color=#EC008B></font size=5><br>

<table border="0" cellpadding="5" cellspacing="0" width="600">
<tr><td align="left" valign="top" width="200">

PUT FIRST COLUMN CONTENTS HERE

</td><td align="left" valign="top" width="200">

PUT SECOND COLUMN CONTENTS HERE

</td><td align="left" valign="top" width="200">

PUT THIRD COLUMN CONTENTS HERE

</td></tr></table>



<div style="border:2px solid white;width:700px;height:175px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;"><u><b><font color=#EC008B><font size=5>SHIPPING</u></b></font color=#EC008B></font size=5><br><p style="height:100%;">Shipping takes place on Mondays, Wednesdays, and Fridays after payment is received.<br>All items will be shipped via USPS Priority Packaging.</p></div><div style="border:2px solid white;width:700px;height:175px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;"><u><b><font color=#EC008B><font size=5>POLICY</u></b></font color=#EC008B></font size=5><br><p style="height:100%;">&emsp;We take pride in our vintage clothing collection. All Items are cleaned, pressed, and ready for wear. We strive to give the best quality on our garments.<br><font color=#EC008B>&#38;hearts;</font color=#EC008B><br>The finest in vintage apparel<br><b><font size=4>Everything else is just used clothing.</b></font size=4></p></div><img border="0" src="" width="1" height="30"><div align="center"><table border="0" cellspacing="0" bgcolor="#90C382" align="center"></div></td></tr></table></td></tr></table></td></tr></table></div></td></tr></table></div>

No correct solution

OTHER TIPS

You need to fix your HTML to look like this:

<div style="border:2px solid white;width:700px;height:350px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;background-color:#90C382;display:table;"> 
<u>
    <b>
        <font color=#EC008B>
            <font size=5>MEASUREMENTS IN INCHES</font>
        </font>
    </b>
</u>
<br />
<table border="0" cellpadding="5" cellspacing="0" width="600">
    <tr>
        <td align="left" valign="top" width="200">MEASUREMENTS</td>
        <td align="left" valign="top" width="200">MEASUREMENTS</td>
        <td align="left" valign="top" width="200">IMAGE WILL GO HERE</td>
    </tr>
</table>

You are opening and closing tags randomly. For example your code had:

<u>
    <b>
        <font color=#EC008B>
            <font size=5>MEASUREMENTS IN INCHES
            </u>
        </b>
    </font color=#EC008B>
</font size=5>

this is incorrect HTML, if you open a tag <u> you must close it AFTER all other tags inside are closed. So your code should look like:

<u>
    <b>
        <font color=#EC008B>
            <font size=5>MEASUREMENTS IN INCHES</font>
        </font>
    </b>
</u>

Also when you close a tag(</font>) you CANNOT apply attributes inside it. FOr example, you cannot do this:

</font color=#EC008B>
    </font size=5>

EDIT: Fixed your markup: http://jsfiddle.net/tsecn/4/

Your syntax looks correct. A bit funky but correct. Ebay's HTML editor might be stripping out content, do you have a URL so that we can look at the posting?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top