Can not get Right float div to align at top of parent div?

[dsthompson]

Hi. I am struggling to gert my full-width custom post layout to work correctly with a div element floated leaft and one floated right. The page can be viewed at https://mysalus.org/storefront/hg-wellness/#example. I can’t figure out how to get the right float content div to align at the top of the parent div containing both the left and right floated divs.

I can force the right div to the top with {gap size="-9em"] shotcode and/or {margin-top: -9em} but the left content is variable in height, and using either of these two methods fails to maintain the right div aligned at the top.

I have added a background-color to the parent div to check if the child divs are in-fact within the parnet div, but can not get the right float to work as it should.

Any thoughts on what I am mising?

Thanks.

[dsthompson]

Sorry, please disregard - learning curve here.

[jade]

No worries. Glad you got it sorted.

Cheers!

[dsthompson]

Hi. I thought I had solved it by fixing the position but could not get a layout that worked well on smaller profiles. So have gone back to making responsive with floating divs. I believe my divs are sized and floated correctly, but the right floated div will not align at the top of it’s parent container and stays to the right, below the left floated div.

Thinking it might be a wordpress autop issue, I added a snippet to filter out autop on this custom post type. I am using in-line css to get the page laid-out. Could that be causing the issue?

Anyway nothing I do seems to solve the right div float issue. Could you take a look at the page listed above and see if there is something I am missing to fix this?

Thanks much.

[friech]

Hi There,

You’re either using a 3rd party plugin or a custom template, regretfully we can not provide support for 3rd party plugins or customization.

You can use the 2/3 + 1/3 x columns markup instead.

<div class="my-section x-section">
	<div class="my-container x-container max width">
		<div class="my-column x-column x-sm x-2-3">
			<!-- Main Content Here -->
    	</div>
	<div class="my-column x-column x-sm x-1-3">
    		<!-- Aside Content Here -->
    	</div>
    </div>
</div>

This will give you a nice and responsive 2/3 + 1/3 columns.

Thanks,

[dsthompson]

Worked perfectly! Thanks a million.

[jade]

You’re welcome.