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

[NorseMan]

For this, I've tried most things, but never quite got it to work the way I want it to. Hope you can tell me about the solution for this. Actually, there are two questions here.

1 - I have a div with another div inside. This is the main div which should contain text and the second div which should contain an article image. Which side, i.e. the right or left side, is controlled by float left or right (CSS). The article images have a fixed size of 350X233(230). The article text must follow the picture's height from top to bottom (height 350px), and if the text is longer than that, it must wrap around under the picture. How to do this?

2 - The same div, i.e. the one that will contain the text has, like the images, a fixed height of 350px, as explained. If this text exceeds the height of 350px in height, the div must also be expanded with the required height. I have tried this with both % and lots of other things. Seems like an impossible task to me.

Do you have the solution to this and how to wrap text around the image? CSS and HTML below.

HTML:

Code: Select all

<div class="content1_background"><div class="oval1"></div><div class="content1_image"></div></div>
<div class="content2_background"><div class="oval2"></div><div class="content2_image"></div></div>
<div class="content3_background"><div class="oval3"></div><div class="content3_image"></div></div>
<div class="content4_background"><div class="oval4"></div><div class="content4_image"></div></div>
<div class="content5_background"><div class="oval5"></div><div class="content5_image"></div></div>
<div class="content6_background"><div class="oval6"></div><div class="content6_image"></div></div>
</div>

CSS:

Code: Select all

div.content1_image {
	background-image: url("../images/content1_image.png");
	margin-top: 25px;
	margin-right: 200px;
	width: 350px;
	height: 233px;
	position: initial;
	image-border: medium;
	border-color: black;
	border-radius: 10px;
	display: inline-block;
  	margin: auto;
  	background-color: #eeeeff;
	/*box-shadow: rgba(51, 51, 51, 0.2) 0px 1px 8px 0px;'/''/*/
  	color: #111;
	/*border-radius: 50%;*/
  	text-align: center;
  	font-size: 90px;
  	float: right;
  	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: #ff6633;
	margin: auto;
	margin-top: 25px;
	position: initial;
	background-color: #eeeeee;
	width: 100%;
	height: 250px;
	border: 10px;
	border-color: black;
	/*box-shadow: rgba(51, 51, 51, 0.2) 0px 1px 8px 0px;*/
}
div.content2_image {
	background-image: url("../images/content2_image.png");
	margin-top: 25px;
	margin-left: 50px;
	width: 350px;
	height: 230px;
	position: initial;
	image-border: medium;
	border-color: black;
	border-radius: 10px;
	display: inline-block;
  	margin: auto;
  	background-color: #eeeeff;
	/*box-shadow: rgba(51, 51, 51, 0.2) 0px 1px 8px 0px;'/''/*/
  	color: #111;
  	text-align: center;
  	font-size: 90px;
  	float: right;
  	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: #ff6633;
	margin: auto;
	margin-top: 25px;
	position: initial;
	background-color: #eeeeee;
	width: 100%;
	height: 250px;
	border: 10px;
	border-color: black;
	/*box-shadow: rgba(51, 51, 51, 0.2) 0px 1px 8px 0px;*/
}