qazplok11 qazplok11 - 1 month ago 5
CSS Question

How do I make an html div element follow vertical scrolling (in html/django)?

I'm extremely inexperienced with html and although I know python, I had never used django before this. I'm trying to set up a simple website where the user can view some code on the left side of the screen and enter some text about it on the right side of the screen. The code can be pretty long sometimes so the webpage scrolls, but I want the textbox to always be present even if you scroll up or down. As my code is now, the textbox is on the right side of the screen, but it always stays at the bottom. Here's a screenshot of what it looks like:

example

(can't seem to get screenshot to show up in the post, here's the link http://imgur.com/3JfgHH3)

Here's the .html file I'm using in my templates directory in django:

<div style="display: inline-block">
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

<pre>{{ source_code }}<pre>
</div>

<div style ="display: inline-block" >
<form method="post" action="/labeling/{{ document_id }}/send/">
{% csrf_token %}
<input type="text" name="textfield">
<input type="submit" value="Finish" name="finish_btn" />

</form>
</div>


Sorry for my complete lack of html knowledge. How would I fix this either in django or in the html file directly so that the textbox and button move up and down with the scrolling, instead of being permanently attached to the bottom right of the screen? If necessary I can post the django code too, I just wasn't sure if this was possible directly in html.

Answer

<div style ="display: inline-block;position: fixed;" >

Implement position: fixed; into your styling of the first div. That should already do the trick. Like @furas said is - when it comes to styling - CSS the language you have to learn.

Comments