The height of the div element is causing issues for the adjacent item in the row

I am facing a styling issue where the height of my avatar image is affecting other inline items located next to it. The images below demonstrate this problem.

https://i.sstatic.net/bovge.png

https://i.sstatic.net/EsF2R.png

As you can see, when I increase the height of my avatar logo, it causes the navigation links to be pushed down.

I need the avatar image to not impact the links placed beside it.

Below is the CSS and HTML code:

   .terms-link {
        display: inline-flex;
        align-items: center;
        margin-right: -9px;
    }
    
    .user {
        width: 153px;
    }
    
    .terms {
        width: 103px;
    }

    /* Remaining CSS properties unchanged for brevity */

    <div class="right-side">
    <nav>
        
        <!-- Navigation links -->

    </nav>
</div>

css

Answer №1

To ensure that avatars do not affect its siblings, you can utilize the position:absolute property on your avatar-link class to remove it from the default document flow and set its parent element, nav, to have a position:relative.

div{
  border: 1px solid black;
}

nav {
  position: relative;
}
.avatar-link {
  position: absolute;
  border: 1px solid red;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.terms-link {
  display: inline-flex;
  align-items: center;
  margin-right: -9px;
}

.user {
  width: 153px;
}

.terms {
  width: 103px;
}

.dropdown {
  position: absolute;
  right: 0;
  padding: 30px 50px 30px 0;
  background-color: #336F9C;
  margin-top: 17px;
  z-index: 10;
}

.right-side {
  display: flex;
  align-items: center;
}

.sign-up {
  display: inline;
  color: white;
  margin-left: 1rem;
  margin-right: 1rem;
}

.sign-up a {
  padding: 5px;
}

nav a.is-active {
  border-bottom: 3px solid #00aedb;
}

nav a.is-active.transparent {
  border-bottom: 0;
  color: #00aedb !important;
}

nav {
  margin-bottom: 0;
}

nav a {
  padding: 0 1.5rem 17px 1.5rem;
  position: relative;
  color: white;
  text-decoration: none;
  font-size: medium;
}

.explore-beta span {
  font-size: x-small;
  font-style: italic;
}

.spacer {
  display: inline;
  font-size: medium;
  padding: 0 1rem 17px 1rem;
  color: white;
}

.avatar-frame {
  border: 1.5px solid #c7b89e;
}

.avatar-frame,
.avatar-frame img {
  width: 30px;
  height: 30px;

  -webkit-border-radius: 50%; 
  border-radius: 50%; 

}
<div class="right-side">
  <nav>
    <a routerLink="/initiatives" routerLinkActive="is-active">Initiatives</a>
    <a routerLink="/search" routerLinkActive="is-active">Summary</a>
    <a routerLink="/clinical" routerLinkActive="is-active">Clinical Filtering</a>
    <a routerLink="/explore" routerLinkActive="is-active">Explore</a>
    <a routerLink="/beacon" routerLinkActive="is-active">Beacon</a>
    <a routerLink="/about" routerLinkActive="is-active">About</a>

    <a *ngIf="!auth.authenticated()" class="sign-up">
      <a (click)="auth.login()">Log in</a>
      <div class="spacer">|</div>
      <a (click)="openSignUpDialog()">Sign up</a>
    </a>
    <a *ngIf="auth.authenticated()" [ngClass]="{'is-active': termsLinkActive}" (click)="toggleUser($event)" class="avatar-link">
      <span class="terms-link">
                <div class="avatar-frame">
                    <img [src]="userPicture" />
                </div>
            </span>

      <div *ngIf="userDropdown" [ngClass]="['user', 'dropdown']" (click)="auth.logout()">
        <a>Log out</a>
      </div>
    </a>

  </nav>
</div>

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

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

phphtmlcssbootstrap-4error-handling

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds. I am curious if it is feasible to adjust the background color of #social-media-feeds d ...

javascriptjqueryhtmlcss

SVG to create a gradient mask that appears transparent

I require assistance with working on svg's. I have a "background image" with another "image" layered over it. The "image" needs to have a hole cut out of it so that the background image can shine through. I managed to achieve this by utilizing svg: ...

javascripthtmlcsssvg

I am experiencing an issue where my mobile responsive website consistently shows the smallest CSS width view. What could be the root of this

Currently, I am developing a mobile-responsive website specifically catered to iPhone 6 Plus and smaller models (iPhone 6 & 5 included). When I preview the site using "Inspect Element" in the Chrome browser with these device settings, everything appears t ...

iphonecssresponsive-design

Leveraging Template Variables for Styling in Vue 3's CSS Classes

Struggling to find the perfect way to utilize variables returned by Vue functions in CSS inline styles, specifically with the "width" style. I have two variables that are returned to the template and can be used with the {{}} syntax, but not directly as a ...

javascriptcssvue.jsvuejs3tailwind-css

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

Hidden Navigation Bar in AngularJS

Is there a way to hide the navBar when the route is "/"? I managed to successfully hide/show the navbar, but the issue arises when the navbar is hidden. The "app-body" div then has 50px of padding top (where the navbar should be). Here is my HT ...

htmlcssangularjstwitter-bootstrapnavbar

Adjusting the color of a value in justGage requires a few simple steps to

Is it possible to modify the color and design of the text in the Value parameter of justGage after creating the gauge? My goal is to change the text color to blue with an underline to give it a link-like appearance. Appreciate your assistance. ...

javascriptcsshtmlraphaeljustgage

Is there a way to customize the cursor of the webkit resizer (pulltab)?

I'm having difficulty implementing a custom cursor on my webkit pulltab. While I am able to change other properties like background color, the CSS "cursor" property remains unchangeable: #sessionbuilder::-webkit-resizer { background: #000; cursor ...

htmlcsswebkit

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

javascriptjqueryhtmlcss

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

htmlcsstwitter-bootstrap

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss

Engaging with the CSS content attribute

Below is a code snippet that inserts an image before the header tag. Is there a way to incorporate JavaScript or jQuery in order to execute certain actions when the inserted image is clicked? h1::before { content: url(smiley.gif); } The HTML code fo ...

javascriptjqueryhtmlcss

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

// font.ts file import { Quicksand, Syncopate } from 'next/font/google'; export const quickSandRegular = Quicksand({ subsets: ['latin'], variable: '--font-quicksand-reg', weight: '400', display: 'swap& ...

cssvariablesnext.jstailwind-css

Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id. You can see a demons ...

javascripthtmlcssiframe

Tips for updating the current user's username value in local storage in Angular

https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...

htmlcssangular6typescript2.0

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Is it possible to adjust the color of a pseudo class to align with the color of a different class?

Creating a unique 'block' element on a webpage named 'test-div' has been quite the challenge. Adding an additional class to test-div changes the background color, such as: test-div test-div-bg-bright-gold test-div test-div-bg-dark-blu ...

csspseudo-class

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working! If you have any insights or suggestions, please let me know. Your help is greatly a ...

htmlcss