Home/ Questions/Q 7495969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T18:24:59+00:00

I put some quotes and short messaged in the web-based application that I am

  • 0

I put some quotes and short messaged in the web-based application that I am developing by using this fancy JQuery plugin. Everything works fine but the problem now is with fixing the area that shows the quote or message. I want to have a fixed height of this area instead of being expandable.

How to do that?

HTML:

<div id="wrapper">
            <div id="article">

                <blockquote>
                    <p>Accidents hurt – safety doesn’t.</p>
                    <cite>&ndash; Unknown Author</cite>
                </blockquote>
                    </div>
</div>

CSS:

#wrapper { width: 300px; margin: 1px auto; }    
blockquote p { margin-bottom: 10px; font-style: italic; }
blockquote cite { font-style: normal; display: block; text-align: right; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; }

/*
 |  Setting the width for the blockquotes is required
 |  to accurately adjust it's contianer
*/

blockquote {
    font-family: Georgia, Times, serif;
    width: 250px; /* required */
    margin: 0 auto;
    }

/*
 |  The #quote_wrap div is created
 |  by Quovolver to wrap the quotes
*/

#quote_wrap { 
    background: #fbffec 20px 20px;
    margin: 13px 0 0 0; 
    padding: 20px; 
    border: 1px solid #edffaf; 
    }

JavaScript:

<script type="text/javascript" src="js/jquery.quovolver.js"></script>

        <!-- JavaScript Test Zone -->
        <script type="text/javascript">
            $(document).ready(function () {

                $('blockquote').quovolver();

            });
        </script>

EDIT:
I want to fix because if I have a long message or quote, it will be expanded and this will lead to expand the page of the website as shown below:
enter image description here

If the message is short, the following area will be like this?:
enter image description here

New Update:

The following css property fixed the problem:

height:100px!important;

but now it disturbs the organization of the quote inside the box. For example, if the message is short, it will be at the top of the box. And if it is long, it will be centered and this is what I want for all the messages either it is long or short. So how to do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    .widget_content {
height: 150px !important; /* Or however high you want the div to be */
}

    This will stop the div changing heights, which I assume is what you mean.

    The “150px” can be changed to however high you want the div to be.

    .widget_content {
overflow: hidden;
}

    This will cut off any quotes longer than the height you specify earlier. (if you makes sure all the quotes are small enough to fit inside a div of height you specify earlier, you shouldn’t need this, it’s just in case.)

    • 0