Forums

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
    Posts
  • #271943
    wristcutter69
    Participant

    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:
    http://res.cloudinary.com/dbssny2ox/image/upload/v1527846362/Resultado_Desejado_qkw5ie.jpg

    And Here is how I implemented my code:

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

    https://static.codepen.io/assets/embed/ei.js

    Any help will be really apreciated!

    #271946
    Beverleyh
    Participant

    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.