Position images on the right side of text within the container

I'm having trouble aligning the Facebook and Google+ icons on my website, which can be found here. These circular icons are located just below the navigation bar at the top of the page. The navigation bar is part of a class called 'container_header' in the 'stylesheet.css' file.

The 'index.php' webpage contains the following code, where the icons should be placed within the top container:

<div class ="container_header">
<div class="header_img"><a href="index.php" class="head"><img border="0" src="images/introspect-pictures_logo_header.png" alt="Home" width="185" height="28"></a></div>
<div class="header">
<a href="index.php" class="body">HOME</a>..........<a href="about.php" class="body">ABOUT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<div id="social">
<a href="https://www.facebook.com" target="_blank"><img border="0" src="images/ic_fb.png" alt="Facebook"></a>
<a href="https://www.google.com" target="_blank"><img border="0" src="images/ic_gp.png" alt="Google+"></a>
</div>
</div>
</div>

The 'stylesheet.css' file contains the styling for the icons within the 'social' class:

#social {
float: right;
width: 60px;
text-align: right;
}

#social a {
float: right;
margin: 20px 0 0 5px;
}

#social a img {
width: 24px;
height: 24px;
border: 0;
}

The properties of the 'container_header' class are defined within the same file as follows:

.container_header{
width:800px;
margin:0 auto 0 auto;
padding:10px;
border:0px solid #000000;
border-radius: 5px;
color: #666666;
}

Could anyone assist me in aligning the icons next to the navigation bar (beside 'About') so that they are contained within the 800px container width?

Thank you,

Pete

Answer №1

To start off, eliminate the width attribute from the .header class as it is causing the social icon to not align properly next to the menu item. Additionally, remove the margin-top style from the #social a selector.

UPDATE: You can also achieve the desired result by setting width:100%; for the .header class.

I hope this solution proves helpful to you.

Answer №2

.top-bar {
background-color: #000000;
width: 60%;
float: right;
font-size: 100%;
color: #666666;
font-family: ProximaNovaLight, Proxima Nova Light;
text-align: center;
}

Next, include the social media div before the anchor tags

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to get the DIV to float within its parent div

I'm having an issue with 2 DIV elements (the ones labeled "Module" below) not behaving as expected! When I try to float them so they appear side by side, they end up jumping outside of the parent container and falling below it. I've tried to trou ...

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

Adjust the horizontal position of a text element using CSS

I am faced with a specific challenge where I need to center the text "test" within a text tag using only CSS, without being able to directly change the HTML. <text width="13.89" height="13.89" x="291.46999999999997" y="156.55" transform= ...

How to modify a Python script to print in a specific div element instead of the Chrome console?

Currently conducting preliminary tests on executing a Python script within a Chrome extension. The code provided below is functional, but I am seeking assistance on how to display the value in a div element instead of logging it to the console. Unfortunate ...

Issue with click function not activating in Chrome when using Angular 6

I am facing an issue where the (click) function is not triggering in my select tag when I use Google Chrome, but it works fine in Mozilla. Below is my code: <div class="col-xl-4 col-lg-9"> <select formControlName="deptId" class="form-control ...

AngularJS directive element not displaying CSS styles properly

I've been grappling with this issue for the past few days and I just can't seem to crack it. Whenever I try adding a class to an AngularJS element directive, the styling appears in the code view of my browser (Chrome), but the styles themselves ...

Python regular expressions: eliminate specific HTML elements and their inner content

If I have a section of text that includes the following: <p><span class=love><p>miracle</p>...</span></p><br>love</br> And I need to eliminate the part: <span class=love><p>miracle</p>.. ...

The navigation bar vanishes from sight while scrolling underneath other sections

UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...

Transitioning hover effects with absolutely positioned elements

I am facing an issue where I have an image with a centered absolutely positioned link on top of it. When I hover over the image, there are transition effects in place which work perfectly fine. However, when I hover over the link, these transition effects ...

What would cause this to result in a blank array?

I have a main component that contains multiple sub-components, which I navigate between by clicking on different elements. These sub-components are all Vue files. What I am trying to achieve is to dynamically highlight the active component when it is bein ...

Error messages are being generated by Angular CLI due to an unclosed string causing issues with the

After incorporating styles from a Bootstrap theme into my Angular 8 project and updating angular.json, I encountered a compile error displaying the following message: (7733:13) Unclosed string 7731 | } 7732 | .accordion_wrapper .panel .panel-heading ...

Adjusting the navigation image as it passes through various div elements during scrolling

Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...

Generate several invoices with just a single click using TypeScript

I'm interested in efficiently printing multiple custom HTML invoices with just one click, similar to this example: https://i.sstatic.net/hAQgv.png Although I attempted to achieve this functionality using the following method, it appears to be incorr ...

Utilize Bootstrap form control class to enhance the appearance of WooCommerce address fields

I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

I am currently facing an issue with displaying error messages on my "contact me" form. Although I have successfully implemented validation, I am struggling to comprehend how the errorPlacement function should be utilized. Could someone provide me with a ...

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

Header and footer that remain in place while the content scrolls smoothly

I'm currently working on designing a webpage that includes three separate divs: a header, a footer, and a content area. These divs are intended to fill up the entire screen space available. The header and footer remain consistent in size and structur ...

Use CSS to mimic the :hover functionality for touchscreen devices

I am struggling to get this piece of code to function correctly, $(document).ready(function() { $('.hover').bind('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); ...

Trigger an alert message upon loading the HTML page with search text

I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...