Sheperd Sheperd - 7 months ago 22
CSS Question

Move read more link down with the text

The read more link does not go down with the text itself when the remaining text is shown.

I tried

position: relative;
on the "read more" link which is
<a href="#">Read More</a>
but no luck, because the
<a href="#">Read More</a>
is not a child of
<div="main">
but it is a child of
<div id="sidebox">
and it is in a separate javascript file too.

How can I make the "read more" link move down with the text?

The HTML File:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#mainwrapper #sidebox {top:100px;right:2%;width:18%;position:absolute;direction:rtl;}
#mainwrapper #sidebox #main {top:80px;position:absolute;right:0%;left:0%;margin-left:auto;margin-right:auto;}
#mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;}
#mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;}
#mainwrapper #sidebox a {text-decoration:none;color:grey;font-size:20px;position:relative;top:300px;}
</style>
</head>
<body>
<div id="mainwrapper">
<div id="sidebox">
<div id="main">
<p id="title">SOME TITLE</p>
<p id="sub">SOME LONG TEXT</p>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="readmore.js"></script>
<script>$('#main').readmore({speed: 500});</script>


Part of the code in the readmore.js:

var readmore = 'readmore',
defaults = {
speed: 100,
collapsedHeight: 200,
heightMargin: 16,
moreLink: '<a href="#">Read More</a>',
lessLink: '<a href="#">Close</a>',
embedCSS: true,
blockCSS: 'display: block; width: 100%;',
startOpen: false,
// callbacks
blockProcessed: function() {},
beforeToggle: function() {},
afterToggle: function() {}
},

Answer

It seems the positioning of #main causes some problems, change your css to this:

    #mainwrapper #sidebox {width:15%;direction:rtl;position:absolute;top:100px;right:2%;}
    #mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;}
    #mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;}
    a {text-decoration:none;color:navy;font-size:20px;}