Home / Questions / 43347
Accepted
Máxima Alekz
Asked: 2020-01-11 12:06:01 +0800 CST 2020-01-11 12:06:01 +0800 CST

CSS - Wrap image between text

  • 772

I have the following code:

p{
	border-right: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	padding-right: 5px;
	padding-bottom: 5px;
	margin: 10px 0;
	height: auto;
}
<p><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
.</p>

How can I make the borders or rather, the p be made to the size of the content. The borders "go through" the image. But I want the border-bottom to be after the image.

html

2 Answers

  1. Best Answer

    This is a common error that arises when using floatand the solution in jargon is known asclearfix

    In your case you can use:

    overflow: auto;

    Example:

    p{
	border-right: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	padding-right: 5px;
	padding-bottom: 5px;
	margin: 10px 0;
	overflow: auto;
}
    <p><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.</p>

    • 3

  2. He needs to put <p>him float: leftsince the image hasfloat: right; 

    p {
  border-right: 2px solid lightgray;
  border-bottom: 2px solid lightgray;
  padding-right: 5px;
  padding-bottom: 5px;
  margin: 10px 0;
  height: auto;
  float: left;
}
    <p>
  <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

    • 2