The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Problem positioning CSS element

  • # June 24, 2013 at 10:30 am

    I am trying to position “Post Free Ad”, a green button on

    It should be:

    1) On the left of social sharing buttons (it is already like that in HTML code)
    2) It should be centered in the white space between user welcome message and social icons. Social icons should be aligned to the right.

    # June 24, 2013 at 11:06 am

    This reply has been reported for inappropriate content.

    You can start by

    .post_ad_button {
    /* float: right; <- remove float */
    display: inline-block;

    and then, maybe text-align: center on #user_bar, which would require you to put the welcome stuff in a left floated div.

    # June 25, 2013 at 2:23 pm


    Thanks! I almost got it, except that the second button (“Post Free Ad”) should have text in green color! It seems it is taking the setting from higher class .button-modern span. I set:

    .button-modern.white {
    color: #91bd09;


    It seems to be ignored as Chrome Inspect Element is showing this setting as crossed.

    I do not want to change the original class .button-modern span as it will affect other buttons.

    Please recommend how to set this second button’s text to GREEN

    The link is again:

    # June 25, 2013 at 4:05 pm

    This reply has been reported for inappropriate content.

    The white comes from .button-modern span which means it’s set on the span element, which means you should override it on the span element because it’s never getting the inherited value from the .button-modern.white.

    Try .button-modern.white span { color: #91bd09; }

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed