0

Imagine this:

I have a navbar which is divided into three divs. One for the logo, one for the links, and one for some content which I do not know the size of.

I want the left-most content and the right-most content to be equally sized, but also take as little space as possible. This way my navigation links will be perfectly centered and have as much space as possible for when the page is smaller.

My first approach was to use display: grid; and grid-template-columns: 1fr 3fr 1fr;. However, this approach will either cause the left-most and right-most divs to take more space than necessary, or there wont be enough space for the content at all. Therefore, that is off the table.

My second approach is what I tried to illustrate below, where I have used display: flex; and justify-content: space-between;. Now the left-most and right-most divs are taking as little space as possible which is a step in the right direction. However, because the left-most div is not equally as wide as the right-most div, my links are no longer centered propertly.

I dont want to give both divs a fixed width, because I like how the width is as small as possible and the width of my right-most div may vary depending on e.g. the length of my users username. So is there a way I can set the width of the left-most div to be equal to the right-most any how using CSS?

how my navbar is now:

[LOGO][-------------------LINKS--------------------][LARGE_CONTENT]

what I want:

[LOGO----------][---------------LINKS---------------][LARGE_CONTENT]
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
  • you can either put a fake div in between logo and links or put a max-width inside the logo div. you can try that approach. or padding right on the logo and just call it on media query. another one is put it in percentage. 25% logo 50% links and 25%content. – Crystal May 10 '22 at 18:57
  • So am I right in thinking that what you want is the right hand item to take up exactly the width of its content and the logo to be at the left of an element which has exactly that same width, whatever the viewport width? – A Haworth May 10 '22 at 19:10
  • @Crystal well, I cant really use padding-right or max-width because I wouldnt know which value to set it to. It would depend on how wide the right-most div is, which I cant know. also for the percentages, if I did that 25% may be way to large or way to small depending on the screen size. –  May 10 '22 at 19:13
  • @AHaworth Yh, I want the right hand item to take up exactly the width of its content. And then I want the left hand item to take up exactly the same width as the right hand item. And then the middle item will take all the remaining space inbetween. –  May 10 '22 at 19:15
  • how about a grid-template-columns: auto auto auto; did you try that way? – Crystal May 10 '22 at 19:21
  • seen differently, you want the links to be centred? – Temani Afif May 10 '22 at 19:22
  • @TemaniAfif Correct! –  May 10 '22 at 19:29
  • 1
    check the duplicate then – Temani Afif May 10 '22 at 19:32

0 Answers0