The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Button Group doesn't stay aligned with nav items due to Float property

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #271943

    Hi everyone.

    Recently I have been implementing a Button Group to (eventualy) select the language for a website that Im developing but I have runned into 2 problems:

    1 – The Button group needs “float: left” for the buttons to be joined and the thing is… the floating is making the button group stay out of alignment with the other nav items.

    2 – Another problem is that there is some sort of property in the nav that is making my button group having this huge rectangular padding, which shouldn’t happen… I have already checked the Chrome Inspector and I haven’t found anything and I am getting frustrated as hell with this.

    So to sum it up, I want my nav to look like this:

    And Here is how I implemented my code:

    See the Pen JZdqJm by hell nino ( @wristcutter69) on CodePen.

    Any help will be really apreciated!


    The Button group needs “float: left” for the buttons to be joined…

    1- Not necessarily. Let both a elements sit alongside each other, on one line, so there are no spaces or line breaks/new lines between them. There won’t be any visual gap and no need for the left float.

    2- Dont forget about line-heights. There are some big 60px values in there. Also consider compounded vertical paddings; child element vertical paddings butting up against parent element vertical paddings – their combined values will over inflate things. Best to zero them all and try adding them back in again systematically.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.