This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
April 23, 2012 12:56pm
Subscribe [3]#1 / Apr 23, 2012 12:56pm
Hi, I have a channel field with entries that populate in in two columns. It is a video gallery on the get involved section. When there is an item that is by itself (i.e not side by side) the channel entry populates outside of the containing div. When both columns are full (i.e two entries side by side) the div stretches out to fit as it should.
Any suggestions on how to fix please.
Website: http://www.theworldatyourfeet.co.uk
section: get involved - video thumbs and description
#2 / Apr 24, 2012 11:11am
Hello vincentstephens,
I am sorry to hear you are running into this CSS issue.
Can you show me your template code? That will help me get a clearer picture and enable me to better help.
Cheers,
#3 / Apr 24, 2012 12:56pm
I have now managed to get the content to stay inside the the containing div but only as a single column and not as two columns. the code the displays as two columns but with third channel field item outside the containing div:
This code is from a template (stories), that is embedded in the index template
<!-- content_bg -->
<div class="content_bg">
{embed="twayf/stories-video_gallery"}
</div>
<!-- end right container -->This code is on the stories-video_gallery template:
<style type="text/css">
#videogallery{padding: 10px; width: 700px; }
#vg_column {
float:left;
width:340px;
margin-right: 10px;
margin-bottom: 10px;
}
#videogallery img {margin-bottom: 5px;}
#videogallery img:hover {width: 338px; height:251px; border: solid 2px #65ba75;}
</style>
<div id="videogallery">
{exp:channel:entries channel='video_gallery_stories'}
<!-- left column -->
<div id="vg_column">
<h2>{title}</h2>
<p> <a href="http://www.youtube.com/embed/{video_id_story_gallery}?version=3&hl=en_US&rel=0&autoplay=1">http://img.youtube.com/vi/{video_id_story_gallery}/0.jpg</a><br />
{video_description}<br />
</div><br />
{/exp:channel:entries}</p>
<p></div>#4 / Apr 24, 2012 1:01pm
screen shot
#5 / Apr 24, 2012 2:45pm
Hi, fixed by embedding inside a table with two columns and having two channel fields, one for left td and one for right. more coding but better user interface as provides more control.
<style type="text/css">
#videogallery{width: 700px; margin-top: 10px;}
#vg_left {
height: auto;
width:340px;
margin-right: 10px;
margin-bottom: 15px;
}
#vg_right {
height: auto;
width:340px;
margin-bottom: 15px;
}
#video_gallery_table {}
#videogallery img {margin-bottom: 5px;}
#videogallery img:hover {width: 338px; height:251px; border: solid 2px #65ba75;}
</style>
<div id="videogallery">
<table id="video_gallery_table">
<tr>
<!-- left column -->
<td>
{exp:channel:entries channel='video_gallery_stories-left'}
<div id="vg_left">
<h2>{title}</h2>
<p> <a href="http://www.youtube.com/embed/{video_id_story_gallery}?version=3&hl=en_US&rel=0&autoplay=1">http://img.youtube.com/vi/{video_id_story_gallery}/0.jpg</a><br />
{video_description}<br />
</div><br />
{/exp:channel:entries}<br />
</td></p>
<p><br />
<!-- right column --> <br />
<td><br />
{exp:channel:entries channel='video_gallery_stories-right'}<br />
<div id="vg_right"><br />
</p><h2>{title}</h2>
<p> <a href="http://www.youtube.com/embed/{video_id_story_gallery}?version=3&hl=en_US&rel=0&autoplay=1">http://img.youtube.com/vi/{video_id_story_gallery}/0.jpg</a><br />
{video_description}<br />
</div><br />
{/exp:channel:entries}<br />
</td><br />
<br />
</tr><br />
</table></p>
<p></div>#6 / Apr 25, 2012 4:22pm
Hey vincentstephens,
Glad to hear it. Nice work.
If you need anything else, please just let us know by opening a new thread.
Cheers,