[Resolved] Cannot right align child div within container div

[Michael]

Hi all,

Please can someone tell me what I am missing here. I have a header widget container div containing 2 child divs and I am trying to align the second div to the right of the container. However it refuses to shift. I have tried everything I can think of but no luck. I have outlined the divs to make it easier to see what I am talking about:

https://reclaimdesign-383226.easywp.com/faq/

Here’s my CSS:

#header-content {
	border: 1px solid #9FF;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.wp-block-columns {
	margin: 0;	
	padding: 0;
}

.wp-block-column {
	margin: 0;
	padding: 0;	
}

.likelinks {
	border: 1px solid #F0F;
	height: 100%;
	margin: 0;
	padding: 0 0 0 5px;
}

#openbtn-container {
	border: 1px solid #930;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: right;
	vertical-align: middle;
}

Michael.

[Michael]

Never mind, I deleted the divs for wp columns and wp column in the code snippet, then made the header container a flex box and justified the child divs with space between, and that has shifted it to the right finally!

For anyone else who might benefit:

add_action( 'generate_inside_site_container','mm_insert_social_media_inside_container' );  
function mm_insert_social_media_inside_container() { ?> 

	<div id="header-content">
		<div class="likelinks"><a href="https://www.facebook.com/reclaimdesignza" class="fa" rel="noopener noreferrer" target="_blank" title="Like Us On Facebook"><span class="icon-facebook"></span></a> <a href="https://twitter.com/ReclaimDesignZA" class="fa" rel="noopener noreferrer" target="_blank" title="Follow Us On Twitter"><span class="icon-twitter"></span></a> <a href="https://www.instagram.com/reclaimdesign/" class="fa" rel="noopener noreferrer" target="_blank" title="Follow Us On Instagram"><span class="icon-instagram"></span></a> <a href="https://za.pinterest.com/reclaimdesignza/" class="fa" rel="noopener noreferrer" target="_blank" title="Follow Us On Pinterest"><span class="icon-pinterest"></span></a></div>
		<div id="openbtn-container"> <span class="openbtn">+</span></div>
    </div>

<?php }

CSS:

#header-content {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.likelinks {
	border: 1px solid #F0F;
	height: 100%;
	margin: 0;
	padding: 0 0 0 5px;
}

#openbtn-container {
	border: 1px solid #930;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: right;
	vertical-align: middle;
}

[David]

Hi there,

the openbtn-container element is right aligned when viewed on larger screens.
The issue i see is with this CSS:

#page.hfeed.site.grid-container.container.grid-parent {
    /* border: 1px solid #ff0000; */
    margin: 0 auto;
    padding: 0;
    width: 960px;
}

On smaller screens you’re forcing the container to be 960px wide forcing the right hand content to be off the edge of the view port.

[Michael]

Hi David,

Thanks for looking into it for me. I’ve also set that to be 100% for mobile. For some reason it’s the only way I could get it to work:

@media only screen and (max-width: 768px) {

#page.hfeed.site.grid-container.container.grid-parent {
	width: 100%;
}

}

[David]

I am not sure why you have this CSS:

#page.hfeed.site.grid-container.container.grid-parent {
    /* border: 1px solid #ff0000; */
    margin: 0 auto;
    padding: 0;
    width: 960px;
}

If i disable it in the Developers Tools i cannot see any styling changes.
But its forcing you to add the mobile CSS to correct the width issue ….

[Michael]

I was having great trouble seeing the wood for the trees the other day, so it’s quite possible that the code is redundant (I was trying all sorts to get the images to scale down to mobile)…. I’ll remove it now and see what happens!

[Michael]

Hi David, everything is still present and correct on laptop and mobile, so you’re right it’s not necessary. Thank you for your help!

[David]

You’re welcome

[Author]

Posts