I looked into splitter, but it doesn’t seem to split up entries this way. The entries need to alternate between the columns like so.
<div id="col1">
- Entry 1
- Entry 3
- Entry 5
</div>
<div id="col2">
- Entry 2
- Entry 4
- Entry 6
</div>This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
May 24, 2011 12:21pm
Subscribe [2]#1 / May 24, 2011 12:21pm
I looked into splitter, but it doesn’t seem to split up entries this way. The entries need to alternate between the columns like so.
<div id="col1">
- Entry 1
- Entry 3
- Entry 5
</div>
<div id="col2">
- Entry 2
- Entry 4
- Entry 6
</div>#2 / May 24, 2011 2:06pm
Hi Bransin
Would this do it?
<div id="col1">
{exp:channel:entries ... limit="1"}...{/exp:channel:entries}
{exp:channel:entries ... limit="1" offset="2"}...{/exp:channel:entries}
{exp:channel:entries ... limit="1" offset="4"}...{/exp:channel:entries}
</div>
<div id="col2">
{exp:channel:entries ... limit="1" offset="1"}...{/exp:channel:entries}
{exp:channel:entries ... limit="1" offset="3"}...{/exp:channel:entries}
{exp:channel:entries ... limit="1" offset="5"}...{/exp:channel:entries}
</div>Best, Matt
#3 / May 24, 2011 2:19pm
or
You could use CSS to do it…
{exp:channel:entries ... limit="4"}
<div class="articleSummary {switch='left|right'}">
<h2>{title}</h2>
<p> {content}<br />
</div><br />
{/exp:channel:entries}would render:
<div class="articleSummary left">
<h2>Entry Title</h2>
<p> Entry content…<br />
</div></p>
<p><div class="articleSummary right"><br />
</p><h2>Entry Title</h2>
<p> Entry content…<br />
</div></p>
<p><div class="articleSummary left"><br />
</p><h2>Entry Title</h2>
<p> Entry content…<br />
</div></p>
<p><div class="articleSummary right"><br />
</p><h2>Entry Title</h2>
<p> Entry content…<br />
</div>and the css would be something like (starting point 😉
.articleSummary {
width: 300px;
height: 200px;
margin: 0px 10px 10px 0px;
}
.left {
float: left;
margin-right: 10px;
}
.right {
float: right;
margin-right: 0px;
}#4 / May 24, 2011 2:20pm
That does work, though too many pair tags that I would like to use and the offset value is unknown from page to page. It could be 10 on one page, and 100 on another.
I have tried the CSS method before and ran white space issues with floats and entries being long in length.
#5 / May 24, 2011 2:22pm
I’m with you… then I would use the CSS method.
#6 / May 24, 2011 2:49pm
I have tried the CSS method before and ran white space issues with floats and entries being long in length.
You could try adding a clear to the “left” style…
.left {
float: left;
margin-right: 10px;
clear: left;
}That should clear the left column every time to keep things lined up…
#7 / May 24, 2011 2:56pm
I have tried the CSS method before and ran white space issues with floats and entries being long in length.
You could try adding a clear to the “left” style…
.left { float: left; margin-right: 10px; clear: left; }That should clear the left column every time to keep things lined up…
The problem with the clear: left, is that once cleared the next entry that is floated right, starts where the left entry ends. Leaving a larger gap in the right column.
#8 / May 25, 2011 4:43am
The problem with the clear: left, is that once cleared the next entry that is floated right, starts where the left entry ends. Leaving a larger gap in the right column.
OK, this is how I (sometimes have to) deal with “floaters” 😉
.clear {
clear: both;
}
<div id="content">
<div class="articleSummary left">
<h2>Entry Title</h2>
<p> Entry content…<br />
</div></p>
<p> <div class="articleSummary right"><br />
</p><h2>Entry Title</h2>
<p> Entry content…<br />
</div><br />
<div class="clear"></div></p>
<p> <div class="articleSummary left"><br />
</p><h2>Entry Title</h2>
<p> Entry content…<br />
</div></p>
<p> <div class="articleSummary right"><br />
</p><h2>Entry Title</h2>
<p> Entry content…<br />
</div><br />
<div class="clear"></div><br />
</div><!-- end content --><br />
etc…The ‘clear div’ as I affectionately call it, get’s in the way and sets a new starting point for the following floaters. The ‘clear div’ also causes the enclosing div (#content) to expand around it, even if EVERYTHING within is floating.
Does that help?