960gs and loops

Question

I am working on layout for my web page and I've occured a problem with 960gs.

I use a section tag which will contain entries and a sidebar.

When new entry is added then the sidebar moves down to the last entry.

How it should look:

How it looks:

<section class="container_24">   
{% for n in publisher.object_list %}
<article class="grid_16" style="background: white; height: 100px;">Article</article>
{% endfor %} 
<div class="grid_5" style="background: white; height: 100px; background: red;"> Sidebar </div>

Entries push down sidebar and I want to avoid it

How should this be resolved? By using a relative container on absolute sidebar? Or is it possible to do with 960gs?

I strongly suggest you provide more html/css context, or better yet, a live example so we can understand you properly and help accordingly — Capagris, Nov 09 '11 at 17:12
Ok, it looks to me like a simple positioning error. To give you the exact fix however, can you give us the raw 'html' for those screenshot-examples above? — Capagris, Nov 09 '11 at 17:32
Correctly looking example:
1st Article

Sidebar
{%for n in publisher.object_list %}
Article
{% endfor %} Inocorrectly looking exampel is in 1st post — Efrin, Nov 09 '11 at 17:35

Capagris · Accepted Answer · 2011-11-09T18:16:00.280

0

On a second thought, just add {position:absolute;} to .container_24 .grid_5 {

and your page should look as desired

edited Nov 09 '11 at 18:16

answered Nov 09 '11 at 17:37

Capagris

3,811
5
30
44

I was thinking about using pos relative for parent an absolute for sidebar. But I'am still wondering if resolving my issue will be possible only with 960.gs :)? – Efrin Nov 09 '11 at 17:44
By the way, where did you get this from? '{% for n in publisher.object_list %}'. The easiest way to solve this the way you want it to is to post a live demo so I can work on it. – Capagris Nov 09 '11 at 17:47
Wow, the 960 css code sure looks like a mess. edited my answer above, take a look – Capagris Nov 09 '11 at 17:58
No problem - don't forget to 'check' the answer though – Capagris Nov 09 '11 at 18:36

score 0 · Answer 2 · answered Nov 10 '11 at 17:39

I've found an other, better way of solving my problem.

I've created an aside block (as it was) and an another div for articles in which I looped tag. So to get the effect that I've needed to position just 2 blocks (aside and div)

                <aside class="grid_8 push_16">
                Sidebar
            </aside>
            <div class="grid_16 pull_8" style="">
                {% for n in publisher.object_list %}
                <article class="grid_16">
                    <div class="grid_4 alpha">
                        <div>{{n.date_added|date:"j E Y "}} r.</div>
                        <div>{{n.date_added|date:"Y "}} r.</div>
                        <div style="text-align: center;"><img src=""></div>


                    </div>
                    <div class="grid_12 omega">
                        <h2>{{n.title}}</h2>
                        <hr>
                        <div class="">
                            {{ n.text }}
                        </div>
                    </div>
                </article>
                {% endfor %}
            </div>

It was so simple :)

960gs and loops

2 Answers2