Forums

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

Home Forums CSS Issue with div positioning

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #39727
    edharrison89
    Member

    I’m a bit of a rookie with CSS and I’m having issues positioning a couple of navigation arrows at the bottom of my website page. I am trying to get a pair of arrows (left and right) positioned inline on the right of a ‘grid’ button, but they are sitting too low down for some reason.

    You will see the problem at the bottom of my site here. Does anyone have any ideas where I’m going wrong? Any help would be much appreciated!

    #109516
    chrisburton
    Participant

    On the arrow-wrap, use vertical-align: middle;

    #109517
    chrisburton
    Participant

    @edharrison89 Actually, on grid-wrap, set vertical-align:middle; and on the arrow-wrap, set the height to 20px; and vertical-align: middle;

    #109520
    scottlyttle
    Member

    Personally I would float the div’s rather than inline-block them. Try this CSS:

    #grid-wrap {
    border-right: 1px solid #B1B1B1;
    width: 159px;
    height: 100%;
    float: left;
    }

    #arrow-wrap {
    float: left;
    margin: 20px 0 0 10px;
    opacity: 0.4;
    }

    See the result: http://cl.ly/JJWn

    #109536
    edharrison89
    Member

    Im not sure which method is best, but I ended up using Christophers method and it worked a treat.

    Cheers for the help guys

    #109538
    Kitty Giraudel
    Participant

    About the float vs inline-block discussion, in many situations, you can use whatever you want. Both ways have their bright as their bad effects.

    I personally prefere floats for multiple reasons :

    – I’m used to it

    – Inline-blocks elements are both inline and blocks, which means white spaces and such may cause gaps (read https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

    – The clear fix can now be applied through a pseudo-element without requiring an extra element which is pretty awesome

    Anyway, both ways are dirty. We’re just working around until display: flex become fully supported.

    #109583
    scottlyttle
    Member

    Also inline-block is not supported lower than IE8. Just sayin.

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