Image, wrapping text around it and auto hight on div.

[LeonLatex]

I have come a little further in trying. I've been trying this for three days now. I am attaching the CSS and HTML that are relevant. However, I will explain what is happening. I get the text to wrap around the image. What I can't manage to do is create the space I want the text to have for the image. That is the text that is placed on the underside and the text that is on the right side of the image. If I get the distance to the image on the right of the image, the wrapping function disappears and the text does not fit under the image as it did before when necessary (when the text is so long/too long). This is hopeless!

Can someone please look through what I have done and tell me what is wrong/what I am doing wrong, and please also come up with the solution to the problem so that I can fill in the correct one that is the solution to the problem?

 

CSS:

div.content1_image {
	background-image: url("../images/content1_image.png");
	width: 275px;
	height: 181px;
	position: initial;
	float: left;
	margin: auto;
	margin-top: 25;
	margin-left: 25px;
	/*image-border: medium;*/
	/*border-color: black;*/
	border-radius: 10px;
	display: inline-block;
  	background-color: #eeeeff;
	/*box-shadow: rgba(0, 0, 0, 0.65) 0px 0px 0px 3px;*/
  	color: #111;
  	text-align: left;
  	font-size: 90px;
  	shape-outside: square();
  	padding: 0px;
  	background-clip: content-box;
}
div.content1_background {
	/*text-align: center;*/
	font-family: "Consolas", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-weight: bold;
	font-size: 14px;	
	color: #000000;
	margin: auto;
	margin-top: 25px;
	position: initial;
	background-color: #eeeeee;
	width: 97%;
	height: 300px;
	border: 10px;
	border-color: black;
	border-radius: 10px;
	box-shadow: rgba(51, 51, 51, 0.27) 0px 0px 0.2em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
div.content2_image {
	background-image: url("../images/content2_image.png");
	width: 275px;
	height: 184px;
	position: initial;
	float: left;
	margin: auto;
	margin-top: 25;
	margin-left: 25px;
	/*image-border: medium;*/
	/*border-color: black;*/
	border-radius: 10px;
	display: inline-block;
  	background-color: #eeeeff;
	/*box-shadow: rgba(0, 0, 0, 0.65) 0px 0px 0px 3px;*/
  	color: #111;
  	text-align: left;
  	font-size: 90px;
  	shape-outside: square();
  	padding: 0px;
  	background-clip: content-box;
}
div.content2_background {
	/*text-align: center;*/
	font-family: "Consolas", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-weight: bold;
	font-size: 14px;	
	color: #000000;
	margin: auto;
	margin-top: 25px;
	position: initial;
	background-color: #eeeeee;
	width: 97%;
	height: 300px;
	border: 10px;
	border-color: black;
	border-radius: 10px;
	box-shadow: rgba(51, 51, 51, 0.27) 0px 0px 0.2em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

HTML:

<div class="content1_background"><!--<div class="oval1"></div>--><div class="content1_image"></div> Lorem ipsum dolor sit amet. Sit dolorum beatae quo assumenda nisi eum fugiat exercitationem aut obcaecati commodi. 33 enim dolor rem accusamus veritatis non sequi facere ut veniam galisum est error illum qui tempore voluptatem. At necessitatibus sunt a fugit repellendus ab assumenda obcaecati et voluptatibus eveniet ex recusandae molestias est temporibus pariatur voluptatem incidunt. Rem adipisci laboriosam eum asperiores voluptas est accusantium minima et sint veniam. Sed quas recusandae in voluptas aperiam non eius amet et nobis voluptatum qui assumenda quia. Non voluptates eius ut odio nisi est consectetur quasi est asperiores distinctio et dolorem saepe in molestiae corporis. Ut placeat nisi et quia tempora qui nihil accusantium ab similique quos non delectus neque ducimus culpa qui distinctio minus. In dolore deserunt est voluptatem iusto quo quia aliquid. Lorem ipsum dolor sit amet. Sit dolorum beatae quo assumenda nisi eum fugiat exercitationem aut obcaecati commodi. 33 enim dolor rem accusamus veritatis non sequi facere ut veniam galisum est error illum qui tempore voluptatem. At necessitatibus sunt a fugit repellendus ab assumenda obcaecati et voluptatibus eveniet ex recusandae molestias est temporibus pariatur voluptatem incidunt. Rem adipisci laboriosam eum asperiores voluptas est accusantium minima et sint veniam. Sed quas recusandae in voluptas aperiam non eius amet et nobis voluptatum qui assumenda quia. Non voluptates eius ut odio nisi est consectetur quasi est asperiores distinctio et dolorem saepe in molestiae corporis. Ut placeat nisi et quia tempora qui nihil accusantium ab similique quos non delectus neque ducimus culpa qui distinctio minus. In dolore deserunt est voluptatem iusto quo quia aliquid. </div>

<div class="content2_background"><!--<div class="oval2"></div>--><div class="content2_image"></div> Lorem ipsum dolor sit amet. Sit dolorum beatae quo assumenda nisi eum fugiat exercitationem aut obcaecati commodi. 33 enim dolor rem accusamus veritatis non sequi facere ut veniam galisum est error illum qui tempore voluptatem. At necessitatibus sunt a fugit repellendus ab assumenda obcaecati et voluptatibus eveniet ex recusandae molestias est temporibus pariatur voluptatem incidunt. Rem adipisci laboriosam eum asperiores voluptas est accusantium minima et sint veniam. Sed quas recusandae in voluptas aperiam non eius amet et nobis voluptatum qui assumenda quia. Non voluptates eius ut odio nisi est consectetur quasi est asperiores distinctio et dolorem saepe in molestiae corporis. Ut placeat nisi et quia tempora qui nihil accusantium ab similique quos non delectus neque ducimus culpa qui distinctio minus. In dolore deserunt est voluptatem iusto quo quia aliquid. </div>

 

Edited August 19, 2022 by LeonLatex

[cyberRobot]

In other words, do you want the gray box to grow/shrink based on the amount of text available? If so, remove "height" from both blocks. Then to prevent the gray box from being smaller than the image boxes, you could use "min-height" instead.

[LeonLatex]

Thanks CyberRobot. I will try your suggestion.

Edited August 24, 2022 by LeonLatex