How do I place a small paragraph to the right in between a text article


Tags: html,css,css3

Problem :

I want to place a quote and want to show this in between the text article. Like the one shown in the screenshot. Somewhere to the right side.enter image description here

DEMO CODE

HTML:

<p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.</p>
<p class="side">This is the block I want to place at the side. This is the block I want to place at the side. This is the block I want to place at the side.</p>
<p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.his text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.</p>

CSS:

p {
  position: relative;
}
.side {
  position: absolute;
  height: 400px;
  right: -50px;
  width: 200px
}

Any idea how to go about this? I'm at lost.



Solution :

.side {
  text-align: left;
  margin: 20px;
  float: right;
  width: 200px;
}

p {text-align: justify;}
<p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.<span class="side">This is the block I want to place at the side. This is the block I want to place at the side. This is the block I want to place at the side.</span> The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.</p>

<p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.his text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link.</p>


    CSS Howto..

    How to create this image using CSS?

    How to make a rollover div clickable?

    How to align a button inside a DIV

    How to check if an element has a hover property and do something to another element in css [closed]

    How do I override inline CSS with Class CSS? [duplicate]

    How to move div to top and remove?

    How to style in IE6 CSS?

    How to scale an element when it loads using only CSS?

    how to place div next to centered div css

    PHP How to not cache generated HTML but cache static data like images/js/css

    How to add or create an illusion of movement to a fixed div?

    How to fixed image on every screen resolution?

    How to style DOM element with CSS that was created with JavaScript function

    How can I attach a method to an object to change CSS

    img not showing in Safari in attempt to make img map responsive

    How to get rid of scrollbars around iframe

    How can I prevent a form-control from taking a new line in Bootstrap

    How can I apply styles to a label whose checkbox is checked using only CSS?

    how to locate an element by value using css selector in webdriver?

    how to break unordered list of links with image or color with css

    How to make this menu occupy all the remaining space's width?

    How should I divide up CSS files to support multiple devices?

    How determine css text of each node in html

    Show text underneath image while hovering without disrupting other elements

    CSS/Javascript show image remove x on mouseover/hover

    How to dynamically modify CSS rule set (e.g. with a class selector) from JavaScript within Firefox Add-on using XUL, SDK or WebExtensions techniques?

    How to refer to a CSS style using ASP.NET MVC?

    CSS how to have two divs to the right of one div but not beside each other

    How to document a webpage HTML and CSS using comments [closed]

    how to auto adjust table td width from the content