What would be my best option for this div

I would like to create a div that should look like this:

The with should be 100% and the height can be everything. How can I accomplish this without declaring pixels for the different divs?

Note: in this example I have used a width of 1200px x 700px. The bottom left image is 33.3% wide and has a height of 57,14285714285714%. The big top image is 66.3% x 57,14285714285714%.

Thank you in advance

It looks like you already know. Use %.

But what about the parent div should I use vh for the height in order to use height properties for the divs inside?

Which a <div> is by default. Let the content define the height, or use padding-bottom: x% to set a fixed aspect.

have you considered using a wrapper?

			.container{
				font-size: 0;
				background: red;
 			}
 			.container > span  {
 				text-align: right;
				display: inline-block;
				width: 67%;
   			}
 			.container img {
 				height: 100px;
			}
			.container   img{
				vertical-align: bottom;
				width: 33%;
 				height: 150px;
 			}
			.container > span > img{
 				width: 100%;
  			}
			.container > span > img +img{
 				width: 50%;
 				 				height: 75px;

 			}

		<div class="container">
				<img src="file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/images/NOVEL-2-GLAM-usm-NOVEL_CAT-MAST_02.jpg" alt="NOVEL-2-GLAM-usm-NOVEL_CAT-MAST_02"/>
				 <span>   
					<img src="file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/images/NOVEL-2-GLAM-usm-NOVEL_CAT-MAST_01.jpg" alt="NOVEL-2-GLAM-usm-NOVEL_CAT-MAST_01"/>
					<img src="file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/images/NOVEL-2-GLAM-usm-NOVEL_CAT-MAST_03.jpg" alt="NOVEL-2-GLAM-usm-NOVEL_CAT-MAST_03"/>
				 </span>
		</div>

Using absolute positioning within the box and % widths:
http://codepen.io/SamA74/pen/gPvjdV

Hi the donboe,

check out the attachment to see an alternative method - ( float ). :sunglasses:

bikes.zip (134.4 KB)

coothead

1 Like

Try this:

<div style="width:800px; height:467px; background-color:#DA3B01;">
   <img style="float:right" src="tr-534x265.jpg" width="534px" style="width:67%" alt="#" />

   <div style="width:0.0001%; height:42%;" ></div>
 
   <img style="float:left"  src="bl-265x268.jpg" width="265" style="width:33%" alt="#" />
   <img style="float:right" src="br-264x199.jpg" width="265" style="width:33%" alt="#" />
</div>

I cut three images from your supplied image of 800x467px.

Using a DIV dimension of 1200x700px and your original images will scale OK BUT is not responsive.

Edit:
Added missing width to style=“33%”

@SamA74, @coothead and @John_Betong Thank you guys for your responce. I find all three sollutions very nice. I will look in all three off them and keep you informed

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.