Position the div to the furthest right side of the screen

How can I position the cog container on the right side of the page and adjust its size to match this image:

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

.header-container {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(242, 242, 242);
        height: 4em;
        padding: 1em;
        display: flex;
    }
    
    .header-container .header-logo {
        height: 4em;
        display: flex;
    }
    
    .header-container .beta-tag {
        color: rgb(255, 0, 77);
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 800;
        -webkit-font-smoothing: antialiased;
        padding-left: 5px;
    }
    
    .header-container .settings-button {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        align-items: center;
        vertical-align: center;
        height: em;
    }

    <div class="header-container">
        <img class="header-logo" src="https://app.houseparty.com/static/media/logo_text.f1778ae3.svg" />
        <div class="beta-tag">Beta</div>
        <div class="settings-button">
            <svg
                viewBox="0 0 40 40"
                xmlns="http://www.w3.org/2000/svg"
                style="cursor: pointer; display: block; fill: rgb(102, 102, 102);"
            >
                <path
                    d="M38.1 17.3l-..."; 
                </path>
            </svg>
        </div>
    </div>

Fiddle available at: https://jsfiddle.net/ta2ce75y/1/.

htmlcss

Answer №1

Give this a shot:

.navbar-style {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgb(200, 200, 200);
  height: 4em;
  padding: 1em;
  display: flex;
  position: relative; /* Included */
}

.navbar-style .logo-header {
  height: 4em;
  display: flex;
}

.navbar-style .tag-beta {
  color: rgb(255, 0, 77);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  padding-left: 5px;
}

.navbar-style .btn-settings {
  cursor: pointer;
  display: block;
  fill: rgb(102, 102, 102);
  height: 45px;
  /* Included */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

<div class="navbar-style">
  <img class="logo-header" src="https://mywebsite.com/logo.svg" />
  <div class="tag-beta">Beta</div>
  /* Adjusted */
  <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="btn-settings">
    <path d="M38.1 17.3l-5.8-.7c-.3-1-.6-2-1.1-2.9l3.5-4.6c.......</path>
  </svg>
</div>

Answer №2

To enhance the styling for your 

.header-container .settings-button
class, simply add margin-left: auto;. Additionally, I have made some adjustments such as setting a max width for the logo and removing the height from .header-container.

.header-container {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgb(242, 242, 242);
  /* height: 4em; */
  padding: 1em;
  display: flex;
  align-items: center;
}

.header-container .header-logo {
  height: 4em;
  display: flex;
}

.header-container .beta-tag {
  color: rgb(255, 0, 77);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  padding-left: 5px;
}

.header-container .settings-button {
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 150px;
  align-items: center;
  margin-left: auto;
  /* vertical-align: center;
  height: em; */
}
<div class="header-container">
  <img class="header-logo" src="https://app.houseparty.com/static/media/logo_text.f1778ae3.svg" />
  <div class="beta-tag">Beta</div>
  
  <div class="settings-button">
    <svg
      viewBox="0 0 40 40"
      xmlns="http://www.w3.org/2000/svg"
      style="cursor: pointer; display: block; fill: rgb(102, 102, 102);"
    >
      <path
        d="M38.1 17.3l-5.8-.7c-.3-1-.6-2-1.1-2.9l3.5-4.6c...
        ...
        ...
    </svg>
  </div>
</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

Send image data in base64 format to server using AJAX to save

My goal is to store a base64 image on a php server using the webcam-easy library (https://github.com/bensonruan/webcam-easy). I added a button to the index.html file of the demo: <button id="upload" onClick="postData()" style=" ...

javascriptphphtmlajaxbase64

Is it possible to halt the current appearance of a HTML element temporarily?

In my intricate web application, I have multiple modal editors that require a short animation upon opening. However, before initializing the editor and beginning the animation, I must first DEINITIALIZE the main user interface due to its heavy resource usa ...

javascriptcsshtmldom

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

Creating a transparent background for a Canvas animation with three.js and dat.gui

I'm struggling to set up a background animation on this canvas using three.js. However, the background renders as black instead of transparent. I attempted to adjust it with CSS by adding background-color:transparent;, but to no avail. I've searc ...

javascriptcsscanvasthree.jsdat.gui

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

javascriptphpjqueryhtmlmysql

Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

I have created a slider using Bootstrap and some JavaScript code that I modified from various sources. Everything is working well, but I want to remove the transition or animation that occurs when the caption changes. Currently, the captions seem to slide ...

javascripthtmlcssbootstrap-4carousel

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

Is it possible to assign a width property to a div element?

I want DivTest and IdOtherDIV to have the same width. I attempted to set properties like this: DivTest { background: #007C52; width: document.getElementById("IdOtherDIV").scrollWidth + "px.\n"; } Is there a way to achieve this (considering tha ...

javascripthtmlcss

Using jQuery to set an ID

Need help creating a menu where clicking on a menu item sets it to active while deselecting the previously selected item. Can't figure out what's wrong with my code: http://jsfiddle.net/Z5M2a/15/ Edit: Swapped id and class, still facing issues. ...

jqueryhtmlmenu

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

htmlcss

Having trouble retrieving the text of an element using Selenium

Looking at the DOM element provided: <span class="styles__Content-rlm06o-1 ixoRjG">20.00000000</span> I am attempting to extract the value 20.00000000 using the following Python code: text = driver.find_elements_by_xpath("//*[@c ...

pythoncssseleniumselenium-webdriverxpath

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure. If the issue lies wit ...

javascripthtmlcsspdfphantomjs

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

javascripthtmljquerycss

Container with equal height dimensions

I've seen a few questions on this topic before, but I can't seem to make it work. So I have a row with two columns inside and I want them to have the same height. I've tried using d-flex, but it just won't cooperate: <div class=&quo ...

htmlcssbootstrap-4flexbox

What is the best way to incorporate a fixed-position button that spans the full width of the screen?

After trying numerous solutions on stackoverflow, I have yet to find one that works for me. a.buttongc { border-radius: 5px; background: #f5b220; color: #fff; font-size: 17px; height: 44px; line-height: 42px; color: #fff; text-decoration ...

htmlcss

css avoiding code duplication with nested classes

I created a custom CSS class named button.blue: button.blue { background-color: blue; ... } button.blue:active { background-color: darkblue; ... } button.blue:hover { background-color: lightblue; ... } To implement this class, I use the following code: ...

css

Visuals Divide the Text

"Incorporate visual elements to enhance the content." Can anyone explain the concept? How can it be implemented using html or css? Much appreciated. ...

htmlcss

Is it possible to serialize the entirety of a website's Javascript state, including Closure/Hidden scopes?

My goal is to capture a "snapshot" of a webpage while maintaining its interactive functionality, allowing all Javascript states to be saved and restored. An example scenario where this would be beneficial is when a webpage contains script that utilizes glo ...

javascripthtmlgoogle-chrome-extensionfirefox-addon

Challenges encountered while attempting to animate the CSS clip feature in WebKit

I've been searching everywhere for a solution to my issue, but none of them seem to work. As someone new to CSS3 Animations, I appreciate your patience. I created a simple animation using CSS3 that functions perfectly in IE and Firefox, however, it ...

cssgoogle-chromeanimationwebkit

Clicking on the button will advance to the next tab rather than selecting the tab

I have this code snippet in HTML: $(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(th ...

javascriptjqueryhtmltwitter-bootstrapcss