Wrap text around an image

Hi, how can I wrap my paragraph text around the image? I tried using floats, but must have been using them wrong.

Here is a basic example.
http://codepen.io/ryanreese09/pen/RPymPp

Got it. Thanks, one last question. How can I put margin on the paragraph text so it is aligned with the article title, but margin in reference to the image, not the left side of the container, if that makes sense. When I put margin, i want it pushing off the image, otherwise when the browser is resized, it does not keep the same design. I can make an image of what I’m talking about if necessary

I’d wrap the article title / the paragraph text in a div and have it set up like this (pseudo code)

-container
 -/img
 -subcontainer
  -title
  -paragraph text
 -/subcontainer
-/container

Make sense? (If I understand you right. Your arrows weren’t very helpful :stuck_out_tongue: .

All that did was basically add another <div> inside my code. Basically I want the image to basically act as a block element so when the paragraph is floated, its margin is based off the image and not the left most part of the parent element as you can see in that picture. imagine that the image is a column, and the paragraph is another column in the page. I’m not sure how else to explain this

Alright well I’d still do the HTML change though. Then in the subcontainer element, that element needs a left margin = to the width of the image. If I understand you right.

If you don’t do the change, all other elements on the “right column” would need that left margin. So the title, paragraph, etc. Easier to wrap it in a subcntainer element, like in my example, and just put it there. Easier to maintain.

Ah ok, I was hoping I wouldnt have to put a margin with the width of the image. I guess that’s the only way?

Well, I mean technically you could get it to work without it but it’d involve a bit more markup and that amazing table/table-cell approach you love. Or even inline-block. But both of those have flaws that this method does not.

This is the best way.

Am not sure what intent of the OP’s is. But if am reading it correctly , Ryan’s markup structure is right. assuming you give the sub container overflow:hidden; display:inline-block and floating it would ‘work’ but you would need some sort of width control.

Something like this:

<html>
	<head>
		<title></title>
		<style type="text/css" media="screen">
			.imageContainer{ 
				float:left; 				
				text-align: left; /* which way do you want your image to line up in the colum?*/
			}
			.imageContainer img {display:block;  margin: 0 2em 2em 0}
			.textContainer, .mainCotainer {  overflow: hidden;
}
@media screen and (max-width:460px){
				.imageContainer{ 
				float:none; 				
				}
	
}
		</style>
	</head>
	<body>
		<div class="mainCotainer">
		 <div class="imageContainer">
		 	<img src="#" height="150" width="400" >
		 	<img src="#" height="150" width="300" >
		</div>
		 <div class="textContainer">
		 <h2> Headings and stuff</h2>
		 <p>  sample text:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
		 <p>  ANOTHER PARAGRAPH: All of ethe text goes in te text conatiner!!!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
		 <p>  ANOTHER PARAGRAPH: All of ethe text goes in te text conatiner!!!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
		 <p>  ANOTHER PARAGRAPH: All of ethe text goes in te text conatiner!!!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
		 </div>
	   </div>
		
	</body>
</html>

if you want the text to be visible if the container becomes too narrow, you will need responsive CSS in the form of the @media query

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.