Items on left and right in nav

[arnsa]

Hello,

so I have navigation bar with a few items and they are all centered. But there has to be some space in the middle of the left and right elements, so I added a class .left that I applied to the only left element and added so margin-right: 15em, but when resize browser’s window to really small, right elements get out of navigation’s background for some reason. What would be the best way to solve this (besides using flexbox)? Here’s the code:

http://codepen.io/arnsa/pen/vLmNPj

Big THANKS!

[bearhead]

This is how I would do it:

http://codepen.io/kvana/pen/rxmOXM

I gave the ul a max width and centered it within the nav. Then I created a .left and .right class and gave those float:left and float:right declarations, respectively. I applied those classes to the appropriate li.

Additionally, I created a class: .group to clear the floats.

[arnsa]

Hm, that works brilliantly, but I can’t understand how do they get centered and how can I change that space between left and right elements (like make it bigger or smaller)? Thanks!

[bearhead]

The ul is centered within the nav element with margin: 0 auto

Additionally, I gave the ul a max-width of 800 px. The buttons are positioned to the left and right of the ul and the have set widths, so the space between them depends on the overall width of the ul.

If you would like the left and right buttons to be closer together, so that the space is smaller, you can simply give the ul a smaller max-width.

[gcyrillus]

you could use the display:table/table-cell properties, so it can expand/shrink. Seems to me flexible enough to your needs

http://codepen.io/anon/pen/vLmGLY

[arnsa]

@bearhead oh, it finally makes sense! Thanks a lot, that’s what I wanted.

@gcyrillus the space between “Easy” and “Hard” is too wide.

[gcyrillus]

@gcyrillus the space between “Easy” and “Hard” is too wide.

hmmm, what about looking at the code and update a single value to fit your needs ? (it is actually the padding you setted)

[Author]

Posts