How to vertically align text and 4 images? - html

Question

I am trying to build a page that has a paragraph of text with 4 images in a quad that are directly to the right of it. The problem is I've previously tried using floats, but as expected, this did not work and so far I have this... http://www.franhaines.co.uk/paddlethewye/
The code:
#panel1 {
padding: 5%;
width: 100%;
background-color: #16818a;
}
#intro-text {
background-color: #16818a;
width: 50%;
}
div#quad {
background-color: #111; font-size: 0;
width: 50%; margin: 0 auto;
}
div#quad figure {
margin: 0; width: 50%; height: auto;
transition: 1s; display: inline-block;
position: relative;
}
div#quad figure img {
width: 100%;
height: auto;
}
div#quad figure:nth-child(1) {
transform-origin: top left;
}
div#quad figure:nth-child(2) {
transform-origin: top right;
}
div#quad figure:nth-child(3) {
transform-origin: bottom left;
}
div#quad figure:nth-child(4) {
transform-origin: bottom right;
}
.expanded {
transform: scale(2);
z-index: 5;
}
div.full figure:not(.expanded) {
pointer-events: none;
}
div#quad figure:hover {
cursor: pointer;
z-index: 4;
}
<section id="panel1">
<div id='intro-text'>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3>
</div>
<div id="quad">
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/courses.jpg" alt="courses" width="1000" height="700" class="alignnone size-full wp-image-31" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/rental.jpg" alt="rental" width="1000" height="700" class="alignnone size-full wp-image-32" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/tour.jpg" alt="tour" width="1000" height="700" class="alignnone size-full wp-image-33" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/where.jpg" alt="where" width="2592" height="1944" class="alignnone size-full wp-image-34" />
</figure>
</div>
</section>
Any help would be appreciated, cheers!

Answer 1

You can use display:table & table-cell to layout the wrapping divs and float the images.
#panel1 {
display: table;
width: 100%;
table-layout:fixed; /* split columns equally */
}
#intro-text {
display: table-cell;
vertical-align: middle;
}
#quad {
display: table-cell;
vertical-align: middle;
}
#quad img {
display: block;
width: 50%;
height: auto;
float: left;
}
<section id="panel1">
<div id='intro-text'>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3>
</div>
<div id="quad">
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/courses.jpg" alt="courses" class="alignnone size-full wp-image-31" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/rental.jpg" alt="rental" class="alignnone size-full wp-image-32" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/tour.jpg" alt="tour" class="alignnone size-full wp-image-33" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/where.jpg" alt="where" class="alignnone size-full wp-image-34" />
</figure>
</div>
</section>
Ideally the images should be the same size.

Answer 2

http://jsfiddle.net/fncjqonn/1/. Float #intro-text and div#squad left. Then width: 50%; on div#squad figure
#panel1 {
padding: 5%;
width: 100%;
background-color: #16818a;
overflow: hidden;
}
#intro-text {
background-color: #16818a;
width: 50%;
float: left;
}
div#quad {
background-color: #111;
font-size: 0;
width: 50%;
margin: 0 auto;
float: left;
}
div#quad figure {
margin: 0;
width: 50%;
height: auto;
transition: 1s;
display: inline-block;
position: relative;
}