Question

I am trying to create a Q&A platform but I am having difficulties aligning all the paragraphs. If I set relative positioning, the text begins to overlap with the content to the left of it. If I set it to absolute, the height doesn’t adjust and it begins to overlap with the next paragraph. How can I resolve this?

Here’s my code:

            <div class="question">
                {% if the_question %}
            <ul>
            {% for question in the_question %}
                <li>
                    <div class="votecounter"><div class="numbercount">15</div> Votes</div>
                         <div class="votearrowdiv">
                            <a href="#"><div class="upvotearrow"></div></a>
                            <a href="#"><div class="downvotearrow"></div></a>
                        </div>
                    <a href="/home/{{ movie.id }}/{{ question.id }}/">{{ question.question_text }}</a>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            No questions have been asked.
        {% endif %}
        </div>

    </div>​




.questionvotecontainer{
position:absolute;
border:0px solid purple;
text-align:left;
left:5;
float:left;
display:inline-block;
width:100%;
margin-top:14px;
margin-bottom:4px;
min-width:840;

}
.votecounter{
width:8%;
height:50px;
border:0px solid yellow;
text-align:center;
position:relative;
display:inline-block;
float:left;
font-size:12px;
}
.votearrowdiv{
position:relative;
float:left;
width:4%;
min-height:20px;
border:0px solid gray;
display:inline-block;
min-width:50px;
}
.question{
text-align:left;
width:83%;
height:auto;
display:inline-block;
border:0px solid green;
font-size:18px;
font-weight:bold;
font-family:'Source Sans Pro', sans-serif; font-weight:300;
margin-left:-10px;
padding-bottom:20px;
float:left;
overflow:scroll
min-width:10px;
}
.questionHover{
background-color:#111111;
}
.question ul li{
list-style-type:none;
padding-bottom:10px;
padding-top:2px;
border:1px solid yellow;
width:120%;
min-height:30px;
margin-left:-20px;
overflow:visible;
}
.upvotearrow{
border-bottom:14px solid white;
border-left:14px solid transparent;
border-right:14px solid transparent;
display:inline-block;
margin-top:5px;
position:absolute;
top:0px;
z-index:50;
}
.downvotearrow{
width:0px;
height:0px;
border-top:14px solid #969696;
border-left:14px solid transparent;
border-right:14px solid transparent;
display:inline-block;
position:absolute;
margin-top:26px;
z-index:50;
}
.numbercount{
font-size:24px;
font-weight:bold;
}

.actualQuestion{
    margin-left:40px;
    position:relative;
    }
​

Thanks in advance!

Answer 1

I would recommend you to use something like the 2-columns div layout, for each ListItem: left you habe a fixed-width div floating left, and right you have a div that spans the rest of the horizontal space.

I have simulated it quickly like this, with the CSS inline:

<li>
<!-- left div, fixed width -->
<div style="width: 100px; float: left; backgound: gray;">
    <div class="votecounter">
        <div class="numbercount">215</div> Votes
    </div>
    <div class="votearrowdiv">
        <a href="#"><div class="upvotearrow"></div></a>
        <a href="#"><div class="downvotearrow"></div></a>
    </div>
</div>                    
<!-- right div, rest of the width us-->                      
<div style="margin-left: 100px; margin-right: 0px;background: orange;">
    <a href="/home/{{ movie.id }}/{{ question.id }}/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in est nunc. Etiam pharetra tortor pellentesque tellus accumsan ut rutrum nisi pretium. Donec dignissim sem vel lorem hendrerit elementum. Vestibulum gravida, quam vehicula hendrerit mattis, nulla nisl egestas ipsum, suscipit sagittis urna urna ut risus. Nunc blandit placerat arcu, sed bibendum lectus mattis ut. Sed feugiat dictum molestie. Quisque molestie interdum libero, id convallis tortor congue in. Suspendisse eu turpis mi. </a>
</div>