Kervtuza Posted May 13, 2012 Report Share Posted May 13, 2012 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: 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? Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 13, 2012 Report Share Posted May 13, 2012 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. Quote Link to comment Share on other sites More sharing options...
Kervtuza Posted May 13, 2012 Author Report Share Posted May 13, 2012 The margins of the blockquote is what I was missing! Thanks Andrea! Quote Link to comment Share on other sites More sharing options...
newseed Posted May 14, 2012 Report Share Posted May 14, 2012 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'. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.