help with a tiny bit of EASY php code that is wrecking my head

Hi there
On this page here

You will see the header has a man and underneath it is a title, button and a third image......
I would like them to either;
1. sit in three quandrants (but I think the first image will be too small)
2,  Ideally have the first image sit in the first half and have the title, subtitle and image sit in the second half in its own halved section - if that makes sense).

You can see what I am trying in my  code and its just not working.

This is basically the code and attached it how I am trying to make the header look and work
		<div class="header_gender clearfix">

						// check if the repeater field has rows of data
						if( have_rows('header_gender') ):

							// loop through the rows of data
							while ( have_rows('header_gender') ) : the_row(); ?>
                            <?php $counter++; 
                            if ($counter % 3 == 0) {
     							$col_last = 'last';
    						} else {
     							$col_last = '';

								<div class="one_half">								
									<span class="responsive">
										<a href="<?php echo the_sub_field('link2'); ?>"><img src="<?php echo the_sub_field('image2');?>"></a>
                                <div class="one half last">
								<div class="two_third">									
									<h4 class="gender">
										<?php echo the_sub_field('title2'); ?></h4><br>
										<h6><?php echo the_sub_field('subtitle'); ?><h6>

                                	<span class="button-gender">
                                		<a href="<?php echo the_sub_field('link2'); ?>">
                                			<?php echo the_sub_field('button3');?>
							 <div class="one_third <?php echo $col_last; ?>">
                             <span class="responsive">
										<a href="<?php echo the_sub_field('link2'); ?>"><img src="<?php echo the_sub_field('image3');?>"></a>
				<? endwhile;

						else : endif;


Open in new window

LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SmitWeb DeveloperCommented:
You can quickly fix the typo in your code. You have to replace <div class="one half last"> by <div class="one_half last">.

This will align man, text ('The Gentlemen') & last image next to one after other (the way you are expecting).

Then you can fine tune it with some CSS adjustments.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
A good "early step" is to be sure that the document contains valid markup.  Without that, fine-tuning CSS is bound to be a shot in the dark.
Julian HansenCommented:
Take a look at Bootstrap - it has all the styles and tools to do what you are asking in terms of layout.

You want to be looking at a grid based layout system.
Amanda WatsonWeb DeveloperAuthor Commented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.