jtikcuf Posted March 6, 2013 Share Posted March 6, 2013 so im trying to align 3 videos what the best way? here is what im doing http://bioiman.com i want them to be aling should i be using a table? Link to comment Share on other sites More sharing options...
Labtec Posted March 6, 2013 Share Posted March 6, 2013 Not sure you got a <html>, <head> and <body> WITHIN your <body> though. I daren't send it to the validator! http://validator.w3.org/ Start by validating it, then you know you have no errors so you have eliminated a possible suspect. Regards, L2c. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2013 Share Posted March 6, 2013 Those are from the iframes, IF you want the videos to align horizontally below the highest content above them, you need to create a container to surround the 3 columns, so this container will expand to whichever holds the most content, then place these videos, below this container div, you can use the 3 column containers again to hold the headers and videos, so you have identical 3 column layout. Link to comment Share on other sites More sharing options...
jtikcuf Posted March 7, 2013 Author Share Posted March 7, 2013 Those are from the iframes, IF you want the videos to align horizontally below the highest content above them, you need to create a container to surround the 3 columns, so this container will expand to whichever holds the most content, then place these videos, below this container div, you can use the 3 column containers again to hold the headers and videos, so you have identical 3 column layout. well dont know how to do this but thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2013 Share Posted March 7, 2013 The videos will always remain horizontal, as well as the headings, as the .HighestContentExpander will always expand to highest content within it (column# containers), forcing the headings, and vids to always align to level bottom edge of .HighestContentExpander, instead of individual column heights. <style type="text/css">#ColumnWrapper {width:960px; margin: 20px auto; overflow:hidden; background-color:#F7F7F7;}#ColumnWrapper > div {margin:10px;}.HighestContentExpander {overflow:hidden;}.column1, .column2, .column3 {width:300px; margin:10px 0; background-color:#FFFFFF; overflow:hidden;}.column1 {float:left;}.column3 {float:right;}.column2 {margin:10px auto;}.column1 iframe, .column2 iframe, .column3 iframe { margin: 10px auto; display:block;}</style> <div id="ColumnWrapper"><div class="HighestContentExpander"><div class="column1"> <p>Ullamco laboris nisi eu fugiat nulla pariatur. Quis nostrud exercitation in reprehenderit in voluptate sed do eiusmod tempor incididunt. Consectetur adipisicing elit, ut enim ad minim veniam, mollit anim id est laborum.</p> <p>Quis nostrud exercitation eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt excepteur sint occaecat ut labore et dolore magna aliqua. Ullamco laboris nisi mollit anim id est laborum. Velit esse cillum dolore consectetur adipisicing elit.</p> <p>Ut aliquip ex ea commodo consequat. Duis aute irure dolor ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. In reprehenderit in voluptate cupidatat non proident, sunt in culpa. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p> <p>Excepteur sint occaecat ut enim ad minim veniam, quis nostrud exercitation. Velit esse cillum dolore duis aute irure dolor ut aliquip ex ea commodo consequat. Duis aute irure dolor quis nostrud exercitation excepteur sint occaecat. Eu fugiat nulla pariatur. Sunt in culpa mollit anim id est laborum.</p> <p>Ullamco laboris nisi consectetur adipisicing elit, duis aute irure dolor. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat mollit anim id est laborum. Consectetur adipisicing elit, velit esse cillum dolore ullamco laboris nisi.</p> <p>Qui officia deserunt. Velit esse cillum dolore consectetur adipisicing elit, ut enim ad minim veniam. Ut aliquip ex ea commodo consequat.</p></div><div class="column3"> <p>Ut enim ad minim veniam, velit esse cillum dolore ut labore et dolore magna aliqua. Duis aute irure dolor qui officia deserunt excepteur sint occaecat. Cupidatat non proident, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor ullamco laboris nisi mollit anim id est laborum.</p> <p>Qui officia deserunt consectetur adipisicing elit, lorem ipsum dolor sit amet. Velit esse cillum dolore sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Duis aute irure dolor eu fugiat nulla pariatur.</p> <p>In reprehenderit in voluptate excepteur sint occaecat consectetur adipisicing elit. Lorem ipsum dolor sit amet, sunt in culpa ut labore et dolore magna aliqua. Mollit anim id est laborum. Velit esse cillum dolore quis nostrud exercitation ut enim ad minim veniam.</p></div><div class="column2"> <p>Velit esse cillum dolore duis aute irure dolor excepteur sint occaecat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Duis aute irure dolor ut enim ad minim veniam, sunt in culpa. Excepteur sint occaecat lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p> <p>Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident. In reprehenderit in voluptate. Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p> <p>Consectetur adipisicing elit, sunt in culpa ut aliquip ex ea commodo consequat. Cupidatat non proident, duis aute irure dolor mollit anim id est laborum. Ut labore et dolore magna aliqua.</p> <p>Consectetur adipisicing elit, excepteur sint occaecat lorem ipsum dolor sit amet. Quis nostrud exercitation velit esse cillum dolore ut labore et dolore magna aliqua. In reprehenderit in voluptate sed do eiusmod tempor incididunt.</p> <p>Sed do eiusmod tempor incididunt ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Consectetur adipisicing elit, velit esse cillum dolore sed do eiusmod tempor incididunt. In reprehenderit in voluptate cupidatat non proident, ut enim ad minim veniam.</p> <p>Eu fugiat nulla pariatur. Velit esse cillum dolore quis nostrud exercitation mollit anim id est laborum. Qui officia deserunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi. Ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, duis aute irure dolor ut enim ad minim veniam. Cupidatat non proident, in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ullamco laboris nisi quis nostrud exercitation. Sunt in culpa ut aliquip ex ea commodo consequat.</p></div></div><div class="HighestContentExpander"><div class="column1"><h4><a href="Reflexologia.html" class="auto-style1">Aprenda Mas.....</a></h4></div><div class="column3"> <h4><a href="Orgonitas.html"><span class="auto-style1">Orgonitas (Que Son?)</span></a></h4> <p>Las orgonitas son básicamente unos filtros de energÃa electro-magnética.</p></div><div class="column2"><h4><a href="Reiki-Terapia.html" class="auto-style1">Aprenda Mas.....</a></h4></div></div><div class="HighestContentExpander"><div class="column1"> <iframe width="280" height="150" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/eWnpkz-z8_4"></iframe> </div><div class="column3"> <iframe width="280" height="150" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/-6-j-w3YFpI"></iframe></div><div class="column2"><iframe width="280" height="150" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/3HRXwNQCj9g"></iframe></div></div><div class="othercontent"> <p>Ut enim ad minim veniam, ullamco laboris nisi eu fugiat nulla pariatur. In reprehenderit in voluptate velit esse cillum dolore excepteur sint occaecat. Cupidatat non proident, ut aliquip ex ea commodo consequat. Mollit anim id est laborum.</p> <p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui officia deserunt cupidatat non proident. Quis nostrud exercitation lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt.</p> <p>Velit esse cillum dolore. Sed do eiusmod tempor incididunt ut enim ad minim veniam, duis aute irure dolor. Sunt in culpa qui officia deserunt cupidatat non proident. Eu fugiat nulla pariatur. Ullamco laboris nisi sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div> Link to comment Share on other sites More sharing options...
jtikcuf Posted March 16, 2013 Author Share Posted March 16, 2013 <style type="text/css"> .three-columns .column { width:33%; float:left; } </style> </head> <body> <div class="three-columns"> <div id="clm1" class="column"><iframe width="120" height="115" src="http://www.youtube.com/embed/b5g19zbogyc" frameborder="0" allowfullscreen></iframe></div> <div id="clm1" class="column"><iframe width="120" height="115" src="http://www.youtube.com/embed/b5g19zbogyc" frameborder="0" allowfullscreen></iframe></div> <div id="clm1" class="column"><iframe width="120" height="115" src="http://www.youtube.com/embed/b5g19zbogyc" frameborder="0" allowfullscreen></iframe></div> Link to comment Share on other sites More sharing options...
jtikcuf Posted March 16, 2013 Author Share Posted March 16, 2013 <style type="text/css"> .three-columns .column { width:33%; float:left; } </style> </head> <body> <div class="three-columns"> <div id="clm1" class="column"><iframe width="120" height="115" src="http://www.youtube.com/embed/b5g19zbogyc" frameborder="0" allowfullscreen></iframe></div> <div id="clm1" class="column"><iframe width="120" height="115" src="http://www.youtube.com/embed/b5g19zbogyc" frameborder="0" allowfullscreen></iframe></div> <div id="clm1" class="column"><iframe width="120" height="115" src="http://www.youtube.com/embed/b5g19zbogyc" frameborder="0" allowfullscreen></iframe></div> this will give you 3 perfect align videos enjoy Link to comment Share on other sites More sharing options...
dsonesuk Posted March 17, 2013 Share Posted March 17, 2013 ?? well yeah, since there is no different height content above them, they would be alligned perfectly, also depends on which alignment you are talking about? vertical or horizontal. The columns will be slightly to the left, as they are 33% width (1% less than 100%) and floated left. also the iframes are not aligned horizontally within the columns, if 33% width is greater than width="120" of the iframes the will align left as text would. Mine aligns vertically and horizontally, whatever content is above it and whatever the with of the columns, columns 1, float: left, column 3 float right, and are equal distance from edges, column 2 using margin auto to centre it between column 1 and 3. iframes use display:block; with margin: 0 auto; also to centre themselves whatever the column width. Link to comment Share on other sites More sharing options...
jtikcuf Posted March 17, 2013 Author Share Posted March 17, 2013 ?? well yeah, since there is no different height content above them, they would be alligned perfectly, also depends on which alignment you are talking about? vertical or horizontal. The columns will be slightly to the left, as they are 33% width (1% less than 100%) and floated left. also the iframes are not aligned horizontally within the columns, if 33% width is greater than width="120" of the iframes the will align left as text would. Mine aligns vertically and horizontally, whatever content is above it and whatever the with of the columns, columns 1, float: left, column 3 float right, and are equal distance from edges, column 2 using margin auto to centre it between column 1 and 3. iframes use display:block; with margin: 0 auto; also to centre themselves whatever the column width. i tried to use yours and dint work for me :-(or im just a retard :-) Link to comment Share on other sites More sharing options...
jtikcuf Posted March 17, 2013 Author Share Posted March 17, 2013 (edited) this will give you 3 perfect align videos enjoy This is for horizontal alignment Edited March 17, 2013 by jtikcuf Link to comment Share on other sites More sharing options...
jtikcuf Posted March 17, 2013 Author Share Posted March 17, 2013 this will give you 3 perfect align videos enjoy This is for horizontal alignment Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now