Jump to content

Aligning an image with a blockquote??


Kervtuza

Recommended Posts

Hey Guys,

 

I am currently working on a project and I am trying to align a blockquote to the right of an image, I have the image on the left and the blockquote on the right but they aren't being displayed on the same level, the image always appears underneath the blockquote but to the left.

 

Here is my result:

post-38586-005523200 1336936938_thumb.jpg

 

Here is my HTML for this section:

 

<p><img class="alignleft" src="images/1610h0007.jpg" width="400" height="266" alt="Paint Brush" /></p>

<blockquote cite="http://www.websitegoeshere.com">
<hr />
"Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
<hr />
</blockquote>

<br style="clear: left"/>

 

Here is my CSS for this section:

 

p     {line-height: 2em}

blockquote      {float: right;
	margin: 0 auto;
	margin-left: 27em;
	margin-top: 2em;
	margin-bottom: em;
	padding: 0;
	font-style: italic}

.alignleft	{float: left;
	margin-right: 2em}

.alignright	{float: right;
	margin-left: 2em}

 

Any ideas how I can fix this?

Link to comment
Share on other sites

That usually happens when the two areas are too wide to fit next to each other in their container (counting all margins and padding), but without seeing ALL your code, I can only guess.

Link to comment
Share on other sites

Your image is contained by the <p> tag which is a block element in which by default is 100% of the width. This is why the <blockquote> (which is also a block element) drops down to the next line.

 

To get them side by side you will need to define fix widths for both of them. The blockquote will also need adjustment for margins to not have left/right 'auto'.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...