What is the best way to vertically align an iframe element (embedded Youtube video) within a table cell? Do I need to wrap it in a div element first? Which CSS descriptors do I use? Vertical-align and text-align don't seem to work. My table cell contains text (which I want to align top) and the video (which I want to align bottom). Would it be easier to create a separate table cell for each element?
Thanks but it's not working. I've checked that there are no conflicting style rules in the <td> tag. Text and iframe elements all want to sit centre.
I don't understand this part of your post: src="/default.asp". This is where I put the video URL. In the style I already use float. Here is the html: <td height="360"> <p class="q"> <span class="quote">“blah blah blah blah.â€</span> <br>- Ben Smith</p> <iframe src="xxxxxxxxxxxxxxxxxxxxxxxxx" allowfullscreen="" style="float: left; margin-bottom: 5px;" frameborder="0" height="225" width="348"></iframe> </td>
Have you tried using DIVs instead of HTML? HTML is bad practice anyway but here's a working fix using DIVs/CSS (Would be better for you to use classes and include your stylesheet rather than put the styling on the DIV itself.
Scott you could express more carefully to avoid confusion. You've got to make several changes if you want to stick to tables layout. Thumb the post up if I've sold your problem. Do this: [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]table[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]tbody[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]tr[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]td [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]height[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"500" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]style[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"background-color: #ccc; vertical-align: middle; position: relative;"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]div [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]style[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"position: absolute; top: 0px;"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]p [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]class[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"q"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]span [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]class[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"quote"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]“blah blah blah blah.â€[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]span[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]br[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]- Ben Smith[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]p[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]div[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]> [/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]iframe [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]width[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"560" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]height[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"315" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]src[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"http://www.youtube.com/embed/Nr5EGwY13Qc?list=UUsOn_Tq1jsadX43KQv30Wdw&hl=en_US" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]frameborder[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"0" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]height[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"255" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]width[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"348" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]allowfullscreen[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]iframe[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]td[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]tr[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]tbody[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] [COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]table[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR] Code (markup): Working jsfiddle: http://jsfiddle.net/5ZwzT/
What I was trying to explain was not to use HTML and DIVs together but to use DIVs instead of HTML as HTML is no longer good practice. I'd never heard of JSFiddle though, thanks for the tip.
You mean tables are no good practice? I agree with that, but depends on what he's trying to do. HTML is a markup language. Tables and Divs are part of HTML, mark up language. He HAS to use HTML, just to choose between table or div layout. That's what I was referring to once I've told you to be careful with expressions. JSFiddle is just a test site to see whether the solution is working or not. No problem.
Man you need to have proper programming skills in order to make that thing in the appropriate process.