CODEWITHSUNDEEP
htmlcssblockquote
Cynthia
Cynthia

Reputation: 5403

Blockquote formatting breaks next to a floated DIV

I have a layout I am working on where I need to have a blockquote and some text next to a floated DIV element. The background image and the indenting on the blockquote next to the floated element disappears.

I know why this is happening, I just can't figure out a workaorund. Here is my HTML and CSS code:

blockquote.quote {
  background: url(https://artofskinmd.com/wp-content/uploads/2017/11/open-quotes.png) no-repeat;
  background-position: top left ;
  width:95% ;
  margin:24px auto !important ;
}

blockquote.quote > p
{
	font-family:'Conv_cheddar jack',Sans-Serif;
	color:#538ea6 ;
	text-align:left;
    font-size:34px !important ;
    line-height:1.35 !important ;
	padding:12px 32px;
    margin:0px !important ;
}

.column { float: left; }

.size-onethird { width:32%; margin:0 4% 0 0; }

.size-onethird img { width:100% !important ;
height:auto ;
}
<div class="column size-onethird"><img class="size-full wp-image-8280" src="https://artofskinmd.com/wp-content/uploads/2017/02/drrpalm-long.jpg" alt="" width="500" height="720" /></div>
<blockquote class="quote">The art of cosmetic dermatology allows me to weave together my love of art with my passion for medicine. I truly enjoy helping my patients look amazing through every stage of life, ensuring their inner being is reflected in their outer being. I love that I have the opportunity to live and serve the wonderful people of the San Diego community. It is a privilege to build meaningful and lasting relationships with my patients.</blockquote>
<p>Melanie Palm, MD, MBA, is a board-certified dermatologist serving the San Diego, California area. With over ten years of dermatology experience in both Chicago and San Diego, she founded Art of Skin MD in Solana Beach, CA, to bring to life her vision of an environment where patients receive a superior medical and cosmetic experience from a team of caring professionals in a beautiful, state-of-the-art clinic. In addition to Art of Skin MD, Dr. Palm is an assistant clinical professor at the University of California, San Diego, and an affiliate staff physician at Scripps Encinitas Memorial Hospital. She is a medical author, clinical investigator, physician trainer and contributing dermatology expert for various national media outlets. Her vast experience, extensive training, artistic eye and gentle touch contribute to the exceptional care she provides to her patients.</p>

Any help would be appreciated on this one.

Thanks in advance!

Cynthia

Upvotes: 0

Views: 303

Answers (1)

Prasanth S
Prasanth S

Reputation: 535

fiddle link

background-position: 34% 0px; // for next to float image only

the width of background position should be greater than 32% because .size-onethird width is 32%

.size-onethird { width:32%; margin:0 4% 0 0; }

Upvotes: 0

Related Questions