Center div horizontally and vertically not right

[multichild1]

I am trying to center a div in a left right div assembly within a wrapper. I have it working to a certain extent but there still some issues.

Test area

My code is the following.

<div class="aboutWrapper">
<div class="aboutSectionsLeft">
<img src="https://www.taylorhowes.co.uk/site/wp-content/uploads/2020/05/Cheval-Place_23534_LC.jpg"></div>
<div class="aboutSectionsRight">
<div class="aboutSectionTextBlocks">
<span class="aboutSectionTitle">About Us</span>

Founded by Hal Cripwell, the studio is a interior design practice.
The aim is to remain small so that we can be deeply involved
in every project, offering clients a highly creative, practical and
ultimately personal service.

We have an extensive library of finishes and materials which
are being constantly updated, the technical knowledge and the
necessary technology, together with the assurance of many years
of experience. That’s how we are able to interpret a vision into
reality.

</div>
</div>
</div>
</div>

.aboutWrapper {
    width: 100%;
	display: table;
	background-color:#cccccc;
	height: 100%;
	padding: 2rem 0;
}

.aboutSectionsLeft {
    width: 50% !important;
	background-color: red;
	display:table;
	float: left;
	height: 100%;
}

.aboutSectionsRight {
	background-color: blue;
	float: right;
	width: 50%;
	height: 100%;
	display:table;
}

.aboutSectionTextBlocks{
	background-color: white;
	width: 80%;
	height: auto;
	padding:2rem;
	position: relative;
  	margin: 50%;
  	top: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

[SamA74]

The code posted here, does not seem the same as on the site. For example, the paragraphs of test are missing the p tags.
You should consider validating the HTML before trouble-shooting the the layout, because with invalid HTML you can expect unpredictable results.

[PaulOB]

Were you trying to do something like this?

Why did you display:table for the wrapper and then float two separate tables left and right? There’s no correlation between separate tables but there is between table cells and then you need no height and get all the alignment you need baked in.

These days of course we would use flexbox but I left it as display:table.

Be careful with your use of height:100% as that need an unbroken chain back to root in order to work and indeed would limit most elements to only 100% and no more. Luckily the dsplay:table value treats height as a minimum.

You needed to set a max-width on the images so they will stretch the table and you also need the table-layout fixed algorithm so that widths are honoured rather than content.

@SamA74

The code posted here, does not seem the same as on the site.

Whoops I didn’t notice the link to the site so just used the html and css that was posted in the thread.

[PaulOB]

@multichild1

s it me or is it not quite workign in Firefox,

Looks ok in my Firefox unless I’m not looking at the right thing,

Are you seeing something different?

[multichild1]

Strangely I must be having Firefox trouble, think I sometimes have cache issues whwn using wordpress.

Thanks again though Paul, works great