Confusing CSS Positioning

Question

I am currently working on a practice website based off of the off-white website (https://www.off---white.com/en/US). A problem I am facing is when attempting to position the top tabs that being Shop, More, About, & Contact it moves the off-black™ text I have next to them. Is there anyway I can move the others to the right of the screen and leave the off-black™ on the left?

I have tried multiple things ranging from my own experimentation to reaching the 4th page of google.

My HTML

<div class="web-top">
  <div id="web-top-title">
    <p class="web-top-title-text">Off-Black™</p>
  </div>
  <div id="web-top-shop">
    <p class="web-top-shop-text">Shop</p>
  </div>
  <div id="web-top-more">
    <p class="web-top-more-text">More</p>
  </div>
  <div id="web-top-about">
    <p class="web-top-about-text">About</p>
  </div>
  <div id="web-top-contact">
    <p class="web-top-contact-text">Contact</p>
  </div>
</div>

My CSS

/* Full Page Styling */
body {
    padding:0px;
    margin:0px;
}

/* Top Header Styling */
.web-top {
    color:white;
    background-color:blue;
    width:100%;
    height:22px;
    display:block;
    margin-top:0px;
}

#web-top-title, #web-top-shop, #web-top-more, #web-top-about, #web-top-contact {
    margin-top:-14px;
    float:left;
}

.web-top-title-text {
    margin-left:10px;
}

Welcome. Please read How to Ask, and minimal reproducible example, with the focus on clear problem statement. "Confusing CSS Positioning" is not a very clear problem statement. — random_user_name
– random_user_name, Commented Sep 27, 2019 at 2:55

Nidhin Joseph · Accepted Answer · 2019-09-27 02:53:09Z

1

You can use display: flex; and apply flex-grow for getting this UI.

/* Full Page Styling */

body {
  padding: 0px;
  margin: 0px;
}


/* Top Header Styling */

.web-top {
  color: white;
  background-color: blue;
  width: 100%;
  display: flex;
  align-items: center;
}

#web-top-title {
  flex-grow: 1;
  margin-left: 10px;
}

#web-top-shop,
#web-top-more,
#web-top-about,
#web-top-contact {
  margin-right: 10px;
}

<div class="web-top">
  <div id="web-top-title">
    <p class="web-top-title-text">Off-Black™</p>
  </div>
  <div id="web-top-shop">
    <p class="web-top-shop-text">Shop</p>
  </div>
  <div id="web-top-more">
    <p class="web-top-more-text">More</p>
  </div>
  <div id="web-top-about">
    <p class="web-top-about-text">About</p>
  </div>
  <div id="web-top-contact">
    <p class="web-top-contact-text">Contact</p>
  </div>
</div>

edited Sep 27, 2019 at 2:53

answered Sep 27, 2019 at 2:48

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gravy Over a year ago

That exactly what I needed. I am still wondering though now that they are over there how would I go about separating them from each other?

Nidhin Joseph Over a year ago

you mean spacing?

gravy Over a year ago

Yes. How would I go about spacing them from each other.

Nidhin Joseph Over a year ago

updated the code. I have taken off the height as i guess this is what you are after

gravy Over a year ago

Yes, that is exactly what I was looking for. Thank you for the help.

Sathiraumesh · Accepted Answer · 2019-09-27 03:17:45Z

0

You could float the elements you want on right to right

  .web-top {
    color:white;
    background-color:blue;
    width:100%;
    height:22px;
    display:block;
    margin-top:0px;
}
/* Top Header Styling */

 #web-top-title{
   float:left;
   margin-top:-14px;
   margin-left:10px;
 }

#web-top-shop,#web-top-more ,#web-top-about,#web-top-contact{

    float:right;
    margin-top:-14px;
}

edited Sep 27, 2019 at 3:17

answered Sep 27, 2019 at 3:06

Sathiraumesh

6,1271 gold badge14 silver badges11 bronze badges

Collectives™ on Stack Overflow

Confusing CSS Positioning

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related