How come my Element is extending outside of the header element?

In the header section, there is a div with the class of favourite that is not aligning properly. Despite this being a React project, it has been edited like a regular project for demonstration purposes in this question.

<div className='header'>
  <img class='profilePhoto' src='./userIcon'></img>
  <div class='brand-logo'>
  </div>
  <div class='favourite'>Favourite</div> <!-- This Favourite is going outside div.header-->
</div>

CSS File:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100vw;
  height: 5rem;
  background: #2475b0;
  position: fixed;
}

.profilePhoto {
  position: absolute;
  margin-left: 32px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

.brand-logo {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.favourite {
  display: inline-block;
  position: relative;
  right: 3rem;
}

Brand Logo CSS

.icon-box {
  background: #eaf0f1;
  width: 19rem;
  height: 75%;
  border-radius: 1rem;
  text-align: center;
  vertical-align: bottom;
}

.brand-name {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;
  font-family: 'Luckiest Guy', cursive;
  font-size: 2rem;
}

Image Preview:

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

Any suggestions or tips would be greatly appreciated. Thank you in advance!

htmlcssreactjs

Answer №1

Give this code snippet a try in your preferred CSS file.

    .preferred {
       text-align: right;
       position: relative;
       right: 3rem;
       margin-top: -45px;    
      }

Feel free to adjust the margin-top value according to your requirements.

Answer №2

Adjust the height of the header container

.header {
  height: 10rem;
}

Answer №3

To center your logo, you don't necessarily have to specify a position. Instead, consider removing the fixed height from the header and experimenting with padding. This could potentially solve your issue.

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }

    .header {
    width: 100vw;
    padding: 20px;
    background: #2475b0;
    position: fixed;
    }
       <div class='header'>
    <div class='brand-logo'>
    <img class='profilePhoto' src='/userIcon'>
    </div>
    <div class='favourite'>Favourite</div> <!-- Make sure this Favourite isn't outside div.header-->
    </div>

Answer №4

Include display: inline-block in the following 3 classes:

.profilePhoto, .brand-logo, .favourite {
  display: inline-block;
}

Also, remove the position attribute from the favourite class. Additionally, consider using the 'class' attribute instead of 'className', like this:

<div className='header'>

Answer №5

For a quick fix, consider adding height and padding to your header.

.header {
  width: 100vw;
  height: 10rem;
  background: #2475b0;
  padding-bottom:10px;
  position: fixed;
}

Answer №6

Appreciation:

Hey everyone, the issue was caused by the fact that the element with the class .brand-logo had a height of 100% set. Once I removed:

height: 100%

everything started working as intended... I simply got rid of flexbox and instead used the position property to align my .brand-logo

.brand-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer №7

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100vw;
  height: 5rem;
  background: #2475b0;
  position: fixed;
}

.profilePhoto {
  position: absolute;
  margin-left: 32px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

.brand-logo {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.favourite {
    display: flex;
    position: fixed;
    top: 50px;
    left: 10px;
}
<div class='header'>
    <img class='profilePhoto' src='./userIcon'>
    <div class='favourite'>Favourite</div>
    <div class='brand-logo'></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

Retrieve a file from a webpage that lacks a designated download option

Currently, I am attempting to utilize Python to download an Excel file. You can find the Excel file on the right side of the web page within a box labeled "Top Turnovers - All Market" by visiting this link. https://i.sstatic.net/Zaayr.png Typically, fil ...

pythonhtmlfile

What could be causing my div to overflow its parent div when the screen size is adjusted?

I've been developing my personal portfolio using only pure HTML and CSS, aiming to create a responsive site with media queries. The code below showcases two sections of my portfolio. The issue I'm facing is with the div class "worked-dash." When ...

htmlcssflexboxposition

Setting the selected value of a COREUI multiselect widget

I received the following JSON response from an API. {"first_name":"Person 1","last_name":"Person 1","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78081d0a0b17163 ...

htmljqueryjsoncore-ui

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

I've been working on developing a new forum using Express and React, but I'm facing challenges with saving form data to the database. Currently, my goal is to store topic titles in a MongoDB collection, with plans to expand to include message con ...

javascriptreactjsexpress

Populate a table cell with a div element in HTML

How can I make a div inside a rowspanned table cell 100% high of the cell? Check out this example for reference: https://jsfiddle.net/gborgonovo/zqohw286/2/ In the provided example, I want the red div to vertically fill the yellow cell. Any suggestions on ...

htmlcss

React Router Issue - Page Not Found: [Page Name]

Recently, I've been delving into React and have come to realize the importance of having a router. Following Wes Bos' video tutorials, I encountered an issue while trying to navigate to routes other than my root. import ReactRouter from 're ...

reactjsreact-router

Tips for accessing array or JSON data with ReactJS

As a novice with the MERN stack, I have set up my express app to run on port 3001 with a dbconn route. When I access "localhost:3001/dbconn," it displays the docs array successfully. const mongoose = require('mongoose') const MongoClient = req ...

javascriptnode.jsreactjsexpressmern

Tips for arranging a jQuery UI dialogHere are some suggestions for

http://jsfiddle.net/Qt7pQ/5/ Here is a demonstration of the concept I am working on. My query is regarding how to position a jQuery UI dialog under a radio button? <div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk< ...

jquerycssjquery-ui

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...

javascriptphphtmlangularjs

Using Python to manipulate HTML for printing purposes

As I develop an application in Python, one of the features requires printing PDF files using a Xerox printer. I am currently considering two options: First option: figuring out a way to communicate with the printer driver and send commands to the printer ...

pythonhtmlprinting

How can I create a timed slideshow of images?

Is there a way to make a series of images slide automatically after closing or stopping a video? To see the specific website in question, click here: Upon visiting the site, a video pops up. How can I program the image slides to transition every 7 secon ...

javascriptcss

Use Javascript's JQuery library to apply functionality to a newly inserted and cloned

I am facing an issue while trying to implement JQueryUI's DatePicker on a node. It works perfectly fine for all the existing nodes, but when I use the clone function to add new nodes, it doesn't seem to apply as expected. Here is the function th ...

javascriptjqueryhtmldom

Share a callback function with child components via props

My child container defines Ownprops like this: export interface OwnProps { prop1: string; prop2: "callback function" } I want to pass a callback function from the parent to this child in order to trigger a parent function from the child. However ...

reactjstypescript

What is the process of generating clozed text using HTML and CSS?

Is there a method to conceal text and create an underline of identical length in an HTML document? In this technique, certain highlighted words remain hidden, substituted with underlines that match the original text's length precisely. Additionally, a ...

javascripthtmlcss

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

Looking for an easy method to identify all JavaScript events linked to a specific HTML element in Chrome? For example: HTML element <a href="#" class="cancel_link refresh_page">Cancel</a> Script: <script type="text/javascript"> $ ...

javascriptjqueryhtmlgoogle-chrome

Creating a responsive bootstrap card-tall for mobile devices

I'm currently using Bootstrap cards to create a gallery-like display of images. To style the images, I'm also utilizing the card-tall class. Since these images are posters, they naturally occupy a lot of space. Here's how it appears on the ...

htmlcssbootstrap-4responsive-designbootstrap-cards

Hiding an element in JavaScript when the onfocus event occurs is not possible

I'm having trouble hiding a div element when clicking on a text box using JavaScript. I've tried the following code, but it's not working. Can anyone spot the error in my program and suggest a better solution? <html> <head> ...

javascripthtml

Choose an image from the gallery, assign a class to it, and then store it in the database

I am looking to implement a feature where users can select an image from a collection of images by clicking on a check mark. Once selected, the image should have a green checkbox indicating it is chosen, and then the ID or name of the selected image should ...

javascriptphpjqueryhtml

Dynamic display of string variable based on conditions

Here is a text format that displays content in a specific way. address, additionalInfo <Text subtitle gray> {address} ", " {additionalInfo} </Text> Now, I want to modify it so that the text will display as: address, (line break ...

reactjsstringreact-nativeconditional-statementsvar