I need to style a blockquote so that it floats to the right, but I also want it to be

I want to enhance the appearance of my blockquotes by giving them a different color background and ensuring they stand out from the regular text. Although using float:right helps achieve this effect, I prefer not to force the blockquote to the right side of the paragraph. Is there a way to center it instead?

Just to clarify, I'd like the text within the block quote to remain left-justified while only the overall form of the blockquote is centered.

Check out this jsfiddle example for reference.

.blockquote {
    width: 75%;
    float: right;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #0fddaf;
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */
    background: rgba(15, 221, 175, .15);
    font-family: fanwood_italic-webfont;
}

.blockquote p {
    padding: 10px

}

<span class="blockquote">Being good in business is the most fascinating kind of art. Making money is art and working is art and good business is the best art.</span>
csscss-floathtml

Answer №1

Have you considered changing the display property of your .blockquote to block instead of floating it? This way, you can easily position it using margins and paddings without the risk of content resizing unexpectedly.

A much simpler solution indeed!

Answer №2

Replace the span tags with div tags and delete the float:right property, then add margin: 0 auto;

Check out this example on jsFiddle

<div class="blockquote">Being proficient in business is a captivating form of art. Making money, working, and excelling in business represent the finest forms of art.</div>

.blockquote {
    width: 75%;
    margin: 0 auto;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #0fddaf;
    background: rgb(15, 221, 175); /* Fall-back for browsers that don't support rgba */
    background: rgba(15, 221, 175, .15);
    font-family: fanwood_italic-webfont;
}

Answer №3

Here is a possible solution for your needs:

In addition, I have included the text-align: right property just in case, as per your request to align the text to the right without affecting the entire blockquote/container.

UPDATE I realized that you had specified float: right, so here is an updated version without it:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The scrollable dialogue disrupts the background's ability to flex and grow

My page layout is pretty simple: <main> <header>Header</header> <section>Content</section> <footer>Footer</footer> </main> <dialog>Dialog</dialog> In terms of CSS, here's how it ...

htmlcssmodal-dialogflexbox

Updating the style of a CSS element using Python Selenium

Is it possible to change the css element style using Python Selenium during automation to increase the height of the page? The structure of the element in the HTML is as shown below: <div style="overflow-y:scroll;overflow-x:hidden;height:150px;&quo ...

pythonhtmlcssselenium

Styling emails with CSS: Tips for customizing fonts

I've been experimenting with setting a personalized font for an email. Within the HTML code of the email, I included the fonts using this snippet: <head> <style> /* latin-ext */ @font-face { font-family: &ap ...

htmlcssemailhtml-email

Cut off a string from the start

I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...

phpjqueryhtmlcss

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

javascripthtmlcssaddeventlistenergetelementsbyclassname

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...

javascriptcss

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Currently, the output of my code looks like this: https://i.stack.imgur.com/pl5CJ.jpg The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing: The text entered ...

javascripthtmlcssvue.js

Integrating external JavaScript widgets into the web application in real-time

I am currently engaged in a React js project that involves the dynamic addition of third party scripts (widgets) to the web app. These widgets encompass various third party platforms such as Twitter, Instagram, Youplay, Youtube, and more. The existing co ...

javascripthtmlreactjs

Struggling with determining the perfect transition speed for the sidemenu display

I'm a newcomer to web development and facing an issue with setting the transition speed for opening and closing this side menu. Despite adding transitions in the CSS and specifying duration in the Javascript, the menu continues to open instantly. I di ...

javascripthtmlcss

Is it possible to use CSS to target the nth-child while also excluding certain elements with

How can I create a clear break after visible div elements using pure CSS? Since there isn't a :visible selector in CSS, I attempted to assign a hidden class to the div elements that should be hidden. .box.hidden { background: red; } .box:not(.hid ...

jquerycss

How can I display an image from PHP on another page?

I need to display multiple images from a database on the index.php page interface. <?php while($row = $result->fetch_assoc()) { ?> <table border="1" width="702" height="149" align="center"> <tr> <td width="148"><img sr ...

phphtmlsql

Is it possible to adjust table rows to match the height of the tallest row in the table?

I've been attempting to ensure that all table rows have the same height as the tallest element, without using a fixed value. Setting the height to auto results in each row having different heights, and specifying a fixed value is not ideal because the ...

javascripthtmljquerycsshtml-table

Transferring information and storing it in a textbox

I have a homepage that features a popup window. <textarea class="form-control item"></textarea> <button type="button" class="btn btn-primary" name="name">Send</button> Additionally, there is a secondary page at (/conclusion/main) ...

javascriptjqueryhtmlajax

Searching for hidden elements within a div using a filter option

An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter ...

javascriptjqueryhtmlcss

What is the best way to align a checkbox and text in the same row within a Mailchimp embedded form?

I am troubleshooting a styling issue with my Mailchimp form that has groups. The problem I'm encountering is that the checkboxes are displaying on one line while the text appears on the next line in an unordered list format. To see the issue for yours ...

htmlcssemail

Ways to prevent continuous database record creation when refreshing the page

My form for adding records to the database looks like this: <form class="col s12" action="" method="post"> <div class="row"> <div class="input-field col s6"> <input placeho ...

phphtmlmysql

I'm having trouble viewing my display:table-cell content because Internet Explorer is hiding it

I am attempting to align an icon vertically centered and far right inside a container. I currently have code that achieves this using ::after and table-cell properties. However, the content does not display in Internet Explorer. If I remove the display:tab ...

cssinternet-explorercss-tables

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascripthtmlcss

Tips for Resizing and Reviving Divs with jQuery

I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page ...

javascriptjqueryhtmlcss