CSS - Fit image between text

Navigation
2

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>

In what way can I make the edges or better, the p is made to the size of the content. The edges "traverse" the image. But I want the border-bottom to be after the image.

    
asked by Máxima Alekz 10.01.2017 в 21:06
source

2 answers

2

This is a common error that arises when using float and the solution in the jargon is known as clearfix

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 adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
.</p>
    
answered by 10.01.2017 / 22:17
source
2

You need to put the <p> the float: left since the image has float: 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>
    
answered by 10.01.2017 в 21:12
Why does not the layout change (Portrait / Landscape) when the device is rotated? Refresh Without Reload Page