CODEWITHSUNDEEP
htmlcssreactjs
Aryansh Mahato
Aryansh Mahato

Reputation: 51

Why my Element is going outside the header element

There is a div with a class of favourite which is not aligning in the header section. Yes this is a react project but it is edited like a normal project for 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 outisde 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:

enter image description here

Any tip will be helpful.. Thank you in advance

Upvotes: 1

Views: 1456

Answers (7)

Dhara Parmar
Dhara Parmar

Reputation: 293

* {
  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>

Upvotes: 0

Aryansh Mahato
Aryansh Mahato

Reputation: 51

Thanks: https://stackoverflow.com/users/2875348/ravibagul91

Guys this is happening because .brand-logo is taking 100% height! When I removed:

height: 100%

then code is working fine... I just simply removed flexbox and used position property to align my .brand-logo

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

Upvotes: 0

Learner
Learner

Reputation: 11

Try this piece of code in favourite class.

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

Adjust margin-top as your need.

Upvotes: 1

Blueberry
Blueberry

Reputation: 31

Try this just add height and padding.

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

Upvotes: 0

vương trọng hồ
vương trọng hồ

Reputation: 81

add display: inline-block to 3 classes:

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

and remove position attribute in class favourite. One more, i think you should use 'class' attribute, not 'className' like : 

<div className='header'>

Upvotes: 0

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You don't need to give position for make your logo in center. Just remove fix height from header and try using padding. Hope will help you.

    * {
    		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> <!-- This Favourite is  going outisde div.header-->
    	</div>

Upvotes: 0

Tech Sourav
Tech Sourav

Reputation: 134

Increase the height of header div

.header {
  height: 10rem;
}

Upvotes: 0

Related Questions