Special div shrinking

Question

How should I change CSS such way, that

• if width of screen > 1100px then left nav width is constantly 555px

Answer 1

The simplest way to accomplish that is to add 2 wrappers, one for the left side and one for the right side, and with that you will be able to easily center where the left/right links wrapper meet.

Remove the

empty space

element in the markup/CSS and instead, to create the empty space at the left in the left side, simply add margin-left: auto to the left_inner and it will be pushed to the right.

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

  

    

      Link left
    
  
  

    

      Link right
    
    

      Button
    
  


  ↑


  Some content

---

Updated

To be able to fullfil both above requirement and to stack them vertical, centered, on narrower screens, you need a media query or a script.

Here is an updated version using a media query for less than 1000px (max-width: 999px)

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

  

    

      Link left
    
  
  

    

      Link right
    
    

      Button
    
  


  ↑


  Some content

---

If you want the link and button wrapper to fill the width, give them a width and make their content center aligned.

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

  

    

      Link left
    
  
  

    

      Link right
    
    

      Button
    
  


  ↑


  Some content