What i want to make is an image wit a paragraph to the right of it at the center of a big div. I also want the paragraph to go bellow the image when the width of the page is too small which i achieve with float:left and clear but i just cant keep them both centered and make the paragraph go below when page is narrow
I’m not sure exactly what you’re trying to do - the “center of a big div” is throwing me off. Can you provide a mockup (screenshot) of what you’re asking for.
I think this is along the lines of what you’re looking for, but it’s a guess. You’'ll need to add an additional container to allow for “centering”. I’ve added extra text to show it easier…
<html>
<head>
<style>
#big_div{
border:2px solid black;
height:100%;
}
#big_div div {
width: 90%; margin: 1em auto;
}
#picture{
margin: 0em 1em .5em 1em;
float:left;
clear:both;
width:500px;
height:400px;
}
</style>
</head>
<body>
<div id="big_div">
<div>
<img id="picture" src="http://i.imgur.com/hWgy3GU.jpg" >
<p id="paragraph">Bacon ipsum dolor amet short loin sirloin corned beef porchetta salami spare ribs cupim drumstick ham landjaeger swine bresaola chicken picanha. Shank porchetta tri-tip sausage chicken. Ham hock burgdoggen shankle pig meatloaf landjaeger. Cow kielbasa brisket prosciutto tri-tip, pastrami short loin ground round. Pork chop fatback cow shankle. Jerky tail chicken tongue burgdoggen, pork belly tenderloin spare ribs pig strip steak.</p>
<p>Beef ball tip meatball short loin cow jowl biltong tri-tip meatloaf kevin swine drumstick spare ribs shoulder. Salami shank kielbasa pork loin jerky ball tip short loin. Salami bresaola pig, boudin hamburger cow chuck. Hamburger pork loin meatloaf pancetta, kielbasa fatback turkey jerky picanha beef jowl cupim porchetta tongue pork.</p>
<p>Ham meatball short ribs pork belly short loin, landjaeger beef ribs flank filet mignon salami rump hamburger. Chuck short loin turkey jowl t-bone turducken fatback ham hock. Kevin fatback alcatra swine brisket ground round, tenderloin tongue burgdoggen picanha chuck. Ribeye pastrami meatloaf strip steak burgdoggen, capicola kevin shank.</p>
<p>Strip steak tail sausage pig hamburger corned beef beef ribs. Pork chop turkey leberkas pork belly sausage, boudin spare ribs frankfurter venison andouille tri-tip prosciutto tongue ham hock jerky. Pig drumstick porchetta cupim prosciutto ground round tenderloin. Frankfurter boudin porchetta jowl. Short loin landjaeger flank pancetta. Jerky porchetta prosciutto pork chop boudin rump meatloaf alcatra pork short ribs turducken spare ribs turkey pancetta biltong.</p>
<p>Biltong frankfurter landjaeger, doner strip steak alcatra sausage pastrami fatback. Shoulder pork strip steak ham cow venison flank ball tip tri-tip burgdoggen cupim. Pork loin kielbasa burgdoggen chuck, strip steak bacon meatloaf flank filet mignon shoulder. Ham hock short ribs venison pancetta.</p>
<p>Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</p>
</div>
</div>
</body>
</html>
Hi thanks for your answer. As a big div i mean a container. I dont want the text to wrap around the image. I just want the whole paragraph to go right below the image when the width of the page is small.
When the width is big enough i want the whole paragraph to be right next to the picture, at the same height.
here is an image http://imgur.com/a/0meH8. At both widths i want image and paragraph to be at the center. What i get is when the width becomes small the text goes to the left of the container
Maybe apply a max-width and margin: auto to big_div.
That will centre all the content.
Then you can manage the layout within that container as you wish, using float or table-cell.
This example uses flex box, so the text does not wrap and no media queries are needed.
But float is there as a fallback if the browser doesn’t do flex (which all current one do).
So in IE9 the text may wrap a little before it goes below the picture.
You can tweak the flex-basis to control where it wraps to a column.
But if all you want is one image - paragraph pair to behave as in the image, you could also use inline-block to align them both vertically and horizontally at all container widths.
