Jump to content

how to align 3 videos?


jtikcuf
 Share

Recommended Posts

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

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

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

  • 2 weeks later...

<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

<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

?? 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

?? 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...